Fetch Request is getting a CORS error

Retired Boards Appdev Extensions
1

I am building a plugin using checkout-ui that needs to fetch data from a 3rd party, but I am getting a CORS error.

Screen Shot 2023-08-12 at 1.37.24 pm.png

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:

  • *.myshopify.com
  • *.shopify.com

Has anyone else his this issue? Going mildly insane as it works fine from Postman.

2

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!

3

That Proxy is actually the Shopify Proxy. From what I’ve read, it’s an
issue with the proxy not supporting the preflight correctly.