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

Solved
petergAtArrived
Tourist
10 0 2
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_
Shopify Staff
Shopify Staff
1044 141 185

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?

0 Likes
petergAtArrived
Tourist
10 0 2

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);
}
})();
});
}

```

 

 

0 Likes
SBD_
Shopify Staff
Shopify Staff
1044 141 185

This is an 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
Tourist
10 0 2

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

 

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

pavindu
Tourist
11 0 4

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.

0 Likes