GraphQL Error 400

[I_KNOW_NOTHING]

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.

[Visely-Team]

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.

[I_KNOW_NOTHING]

Hi,

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

Regards

[Visely-Team]

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