I'm calling the Storefront API from the online store and getting CORS issues, what am I doing wrong?

[petergAtArrived]

I am in the process of moving some functionalities back into our online Shopify store so our customer's can make the API calls with their browsers. I am doing this to leverage the full scope of the rate limit for the Storefront API since it is made per IP address. If I use my backend server as a delegate, it seems that Shopify throttles the calls since it thinks I am making the call from a single ip from AWS.

That being said, I am still having issues with CORS using the public Storefront API on the Shopify online store. I thought it was a localhost issue, but I then pushed a test page into production where it would make a similar call to the Storefront API from my root registered domain and I still get an error with CORS

Specifically the error:

Access to XMLHttpRequest at 'https://coozie-camping.myshopify.com/api/2019-10/graphql.json' from origin 'https://arriveoutdoors.com' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

[SBD_]

Hey @petergAtArrived,

If I use my backend server as a delegate, it seems that Shopify throttles the calls since it thinks I am making the call from a single ip from AWS.

Yep, this will remove the per IP advantage.

I am still having issues with CORS using the public Storefront API on the Shopify online store. Access to XMLHttpRequest at '.../api/2019-10/graphql.json

Can you share the code you're using to send the request?

[petergAtArrived]

Hi @SBD_ thanks for the prompt response!

Hmm, yeah I definitely need to move away from the delegate solution since I need the IP Advantage to handle spikes. 

Yes, I run the storefront API graphql as an ajax call on my Shopify online store in the script tags on one of my test pages, you can actually head there now I point it to an unused page you'll see the CORS error on console log: https://arriveoutdoors.com/pages/quiz

The storefront access token is public, so I'm pasting the entire function here:

```

var _getCollection = function(_handle) {
const _graphQuery = `
query {
collectionByHandle(handle: ${_handle}) {
products(first: 100) {
edges {
node {
id
title
handle
onlineStoreUrl
description
descriptionHtml
vendor
tags
images(first: 10) {
edges {
node {
id
altText
originalSrc
transformedSrc
}
}
}
variants(first: 21) {
edges {
node {
title
image {
src
}
price
}
}
}
}
}
}
}
}
`

return new Promise((resolve, reject) => {;
(async() => {
try {
$.ajax({
type : 'POST',
url : `https://coozie-camping.myshopify.com/api/2019-10/graphql.json`,
contentType: 'application/json',
headers: {
'X-Shopify-Storefront-Access-Token': '38a0fb0aa18dd47bdfa2392815a9719c',
'Accept': 'application/json',
'Access-Control-Allow-Origin': 'http://localhost:3000'
},
processData: false,
data: _graphQuery,
cache: false,
success: function(res) {
resolve(res.data);
},
error: function(status) {
reject(`The collections retrieval has failed, please forward this to support: ${status}`);
}
});
} catch (error) {
reject(error);
}
})();
});
}

```

[SBD_ · Accepted solution]

Thanks @petergAtArrived

Removing the Access-Control-Allow-Origin header will get past the CORS preflight issue. Also, be sure to set the Content-Type to application/graphql

Here's a bare bones example:

$.ajax({
  type : 'POST',
  url : '/api/2019-10/graphql.json',
  headers: {
    'X-Shopify-Storefront-Access-Token': '38a0fb0aa18dd47bdfa2392815a9719c',
    'Content-Type': 'application/graphql'
  },
  data: 'query { shop { name } }',
  success: function(res) {
    console.log(res)
  },
  error: function(status) {
    console.log(status)
  }
});

[petergAtArrived]

Hey @SBD_ just wanted to follow up! I just tried it and it all worked 😄 I can scale my site now 😄 

It was the graphql header this entire time, can't believe I missed that haha

[pavindu]

I'm getting CORS issues with the REST API in the front end. Can you please assist me with this? I'm using Axios for network requests and trying to get an access token, Below is my code.

axios.post("https://"+shop+'/admin/oauth/access_token',{
      client_id: process.env.REACT_APP_SHOPIFY_API_KEY,
      client_secret: process.env.REACT_APP_SHOPIFY_API_SECRET_KEY,
      code: accessCode
  },{
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(res => {
         localStorage.setItem("sa_token", res.data.access_token);
         history.push("/products");

  }).catch(err => {
    alert("Error");
    console.error(err);
  })

P.S: I know that storing secrets in the front end is not correct. I plan to move this to the server-side, but I want the other requests that only need an access token to be called from the browser. I can use the correct answer for this problem for other requests since I'm getting CORS errors for the other requests as well. Please help. Thanks.