For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
I am building a plugin using checkout-ui that needs to fetch data from a 3rd party, but I am getting a CORS error.
As you can see, I'm using the proxy method in the docs (although I get exactly the same error if I call the 3rd party URL directly).
My code is standard fetch from the documentation:
//Set the headers let headers = new Headers(); headers.append('Authorization', 'Basic ' + getApiKey()); headers.append('Accept', 'application/json'); //Build the get request let requestUrl = apiAddressUrl + '?' + serialize(requestData); //Fetch it fetch( requestUrl, { "mode": 'cors', "headers": headers, "method": 'GET', "cache": "no-cache", }, ). then((response) => response.json()). then((response) => console.log(response)). catch(console.error)
In the request in the browser, I can see there is no referrer being set. And it is getting no response headers due to the CORS issue.
I was getting a 404 error from the proxy, but I deleted it and re-created it with a new URL and that resolved it so clearly someone else had that same issue.
On the 3rd party api it is set to allow:
Has anyone else his this issue? Going mildly insane as it works fine from Postman.
Hi Gregles,
The error message indicates a redirect issue with the preflight request. Ensure that the endpoint you're hitting doesn't redirect to another URL. CORS doesn't handle redirects for preflight requests well.
Have you made sure the proxy set up correctly - the proxy should forward the request to the 3rd party server and return the response, including any necessary CORS headers, back to your app.
Tools like Postman don't have the same CORS restrictions as browsers, which is why you're not seeing the error there. This is useful for debugging because it confirms the endpoint works, but it doesn't replicate the browser's behavior.
Hope this helps!
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog