CORS error when using shopify admin api in front end

Question

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:[email protected]/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.

Answer 1

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.