Shopify API's CORS Error

[John_Snow__Know]

So i created a store and this has custom thank you page. So, customer once checked out, will be redirected to a certain thank you page and that page will show a Form depends on what product they bought.

So what i did is I used the Orders API to track the order ID of the customer and check what product they bought.

I made it work. 

But, when i made my store live, i changed my domain from "https://samplestore.myshopify.com" to "https://samplestore.com" the API stopped working.

The error is Access to XMLHttpRequest at 'https://samplestore.myshopify.com/admin/orders/671276859492.json' (redirected from 'https://samplestore.com/admin/orders/671276859492.json') from origin 'https://samplestore.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

So i discover that the API only work on the domain that has .myshopify

Is there any work around here?

My API code was from Postman

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://samplestore.myshopify.com/admin/orders/671291146311.json",
  "method": "GET",
  "headers": {
    "authorization": "Basic ************************************************************************",
    "cache-control": "no-cache",
  }
}

[Jason]

So what i did is I used the Orders API to track the order ID of the customer and check what product they bought.

You're doing that API call on the thank you page with JS? That's super scary. That would mean you're publishing the key and password for the world to see. Even if you limited the scope for the app to only read orders, that would still allow anyone to harvest order data from your shop.

[John_Snow__Know]

Oh, I didn't think about that. but, about my question.

Here's a more detailed error

Access to XMLHttpRequest at 'https://samplestore.myshopify.com/admin/orders/671325356132.json' from origin 'https://samplestore.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.

So you will see that my own domain has been blocked in the domain which has .myshopify

Also, any suggestion where can i do this to avoid the hackers to see my credentials?

[Jason]

I wouldn't be calling it hackers. All you'd need to do is right click on the page and view the source. The key and password details will be sitting there.

A better process would be to have middleware that acts as the gate.

• Your JS on the thankyou page calls the middleware.
• The middleware talks to the API securely.
• Does whatever it needs to do and then returns a response to you.
• From there the JS can pop whatever it wants on the screen.

Now all that said, do you need to do this? Is there something you're trying to access that you can't already? Take a look at the Thankyou page tracking doc:
https://help.shopify.com/en/manual/orders/status-tracking/add-conversion-tracking-to-thank-you-page

You'll see some examples that output info about the product for tracking. Perhaps you can just leverage aspects of that without needing to pull from the api at all.

[John_Snow__Know]

I dont think I can use that thank you page tracking doc. So it is not currently possible to call api if i have my own domain?

[John_Snow__Know]

As shopify blocked it even though the only difference is the .myshopify in the url

[DannyGoyette]

It is so weird to see that in every thread, you can get a kind of answer showing flaws or problem and when you actually ask for an answer to the initial question, evertyhing stops there...seen this on many topics as Shopify does not seem to be a working solution for any of us in real life...

Have the same kind of error with a Live Chat agent and they don't assume that the issue may be on their side, everything is always everyone else's fault...

[Nitin_Kujur]

If you still want to use API call at front-end  by compromising with shop data security (which i will never suggest) you can do this simply by disabling domain redirection. I can certainly help with other safer ways in order to achieve same.

[piroc_media]

not sure if this is fruitful but I get the same error – using different methods to retrieve the JSON data.

a simple request for the Json file causes the error. 

jQuery.getJSON("/admin/products/12345678.json", function( response) {

var theProducts = response.products;
   console.log("product title: " + theProducts[0].title );
});

how can I get the JSON data?