2

I have shopify admin api and I want to call it in the front end but when i try to fetch the data it gives me the following error "Access to XMLHttpRequest at 'https://API_KEY:PASSORD@NAME.myshopify.com/admin/api/2021-07/orders.json' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.", I use axios and fetch and both did not work. any help well be appreciated.

muaz deyab
  • 21
  • 1
  • 3
  • 4
    Yep an admin API isn't meant to be called directly from a browser. Reason : you will probably need to use a super-secret API key, and nothing can be secret in a browser, so it's contradictory. – Jeremy Thille Sep 20 '21 at 07:32
  • can u tell me how can I solve this? – muaz deyab Sep 20 '21 at 07:35
  • 1
    Call the API from your server, not your browser – Jeremy Thille Sep 20 '21 at 07:40
  • can I do in other way if I don`t have access to the server – muaz deyab Sep 20 '21 at 09:19
  • I don't think so. If the server you are calling does not allows CORS, then it's unlikely you can manage to call it from a browser. If it's occasional, maybe from a tool like Postman? – Jeremy Thille Sep 20 '21 at 09:38
  • i tried using postman and it worked, but i need to get the data in the front end – muaz deyab Sep 20 '21 at 09:41
  • Well, I believe you can't for two reasons. The first reason is, CORS is not allowed on the remote resource you're calling, so it's actively refusing to reply. The second reason is, even if it allowed CORS, you would need to send your private admin API key to the browser, and then your private key would become public, which is........ not super secure. – Jeremy Thille Sep 20 '21 at 09:44
  • can I use .env to hide the API_Key in the browser if it would work in the browser ? or do u know you know any other way how can i get the data from shopify to the front end? – muaz deyab Sep 20 '21 at 09:50
  • More details: I want to get the data from shopify and display them in dynamics 365 business central and from there I want to manipulate the data or make post requests – muaz deyab Sep 20 '21 at 09:52
  • I feel from now on, I am only going to repeat everything I said above. So again, 1. _everything is public in a browser_, meaning you can't hide or obfuscate or make something private in a browser, meaning your private key _will_ become public. And 2. Even if you could, _the resource you are calling ACTIVELY REJECTS your request_. So, there are two very strong reasons that prevent you from calling an admin API from a browser. In two words : you can't. I don't think I can be more explicit :) – Jeremy Thille Sep 20 '21 at 09:55
  • The reason you are finding this difficult to do, as has already been explained, is because it is wildly unsafe. The policy you are breaking exists to stop you from doing what you are trying to do. Do not take shortcuts with security, you will regret it. – Libra Sep 23 '21 at 19:10

1 Answers1

5

Great question! It's one that I have encountered as well. Shopify purposely blocks CORS requests. In order to make requests to your backend you will need to setup a Shopify APP Proxy for your front-end to communicate with.

Essentially what this does, is it permits your front-end to make requests to app/api/v1/orders_endpoint which Shopify will then route to https://yourapp.com/api/v1/orders_endpoints.

Check out the Shopify documentation for more information. The code to verify the signature is in Ruby, but some quick google foo turns up results in Javascript as well, see this stack overlow post.

kcamel
  • 145
  • 7