GraphQL Error 400

Excursionist
25 0 4

We have a graphql request and working fine on ".myshopify" domain but returns an error when we change our domain to our ".com" site.

Here's my code:

<script>

 const query = 
  `{
    product(id: "gid://shopify/Product/<<product_id>>") {
      id
      variants(first: 100) {
        edges {
          node {
            title
            inventoryQuantity
          }
        }
      }
    }
  }`;
  $.ajax({
    url: `https://test-website.myshopify.com/api/2019-07/graphql.json`,
    method: 'POST',
    data: JSON.stringify({
        query:query
    }),
    contentType: "application/json",
    headers: {"X-Shopify-Storefront-Access-Token": "<<private app password>>"},
    crossDomain: true,
    success: function(response){
      console.log(response);
    }
  });
</script>
 



Here's the complete error:

OPTIONS https://test-website.myshopify.com/admin/api/graphql.json 400

 

Access to XMLHttpRequest at 'https://test-website.myshopify.com/admin/api/graphql.json' from origin 'https://testwebsite.com' 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.
0 Likes
Shopify Partner
927 96 150

Requests to admin API should be issued from backend. There are CORS policy on Shopify's end that are preventing the cross domain requests like yours above.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Excursionist
25 0 4

Hi,

Thank you for your answer, but can you please elaborate as i am just a newbie dev.

 

Regards

0 Likes
Highlighted
Shopify Partner
927 96 150

You cannot call the API from the JavaScript running in the browser, on production, when you have a thirdparty domain associated with your Shopify store. You should have your own server/service deployed somewhere (backend) and do the calls to Shopify API from there. You can then have the code in JavaScript call your server/service and get the results of the call to Shopify proxied back to you.

 

Here is a nice resource you can follow (all or partial) - https://help.shopify.com/en/api/tutorials/build-a-shopify-app-with-ruby-and-sinatra

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes