CORS error when using shopify admin api in front end

user_16955066 0
Viewed 3884

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.

shopify-api javascript
2 Answers

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.

user_54110280

U should use header in the request headers:{"Access-Control-Allow-Origin":"*"}

user_136750630
Related