Using APIs from a different origin/domain

[Knewb]

Any method I've attempted to request information from a Shopify store from a different domain results in the familiar CORS error:

"Access to fetch at 'https://x.myshopify.com/admin/api/2019-04/graphql.json' from origin 'https://x.ngrok.io' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

I'm trying to create a customer-facing site which is very simple and is just for managing (creating and logging in) customer accounts, and doing specific things with those accounts like setting tags and sending emails to store staff to update details on those accounts once they're created. Using GraphQL or the REST API, is there a way to get the Shopify store to allow API requests from my separate domain without triggering the CORS error? Any way at all to add the appropriate "Access-Control-Allow-Origin" header in the response from the API endpoint?

(The security implications are not my concern here, as I believe API credentials can be obfuscated using backend middleware on the site doing the requests)

Or am I going about it the wrong way and there's another recommended way to do this besides those two APIs?

Or is what I'm trying to do only possible on the same domain as the store, by design, no exceptions?

[Alex · Accepted solution]

If you want to make an API request to the admin API, you have to do it from a back end. Front end requests, as you observed, will be blocked by the CORS policy on our end. What you can do is from your front end, delegate to your backend to make the request, and return the response data from that request to your front end.

[I_KNOW_NOTHING]

Hi,

Can you please explain more how to achieve this delegation from Frontend to Backend?

regards

[Jason]

---

@I_KNOW_NOTHING wrote:

Hi,

Can you please explain more how to achieve this delegation from Frontend to Backend?

regards

---

The flow is fairly simple but refer to the docs for extra info on authentication. You should never be trying to access the Admin API from the front end as it's not secure. You will be passing auth details that anyone could steal so this is just a crazy idea.

General delegation (high level):

1. You'd send info to your app/middlware instead of directly to the API. Perhaps in the ajax call like you're doing now.
2. The middleware will handle the secure authentication to the Admin API - and any other security/rate buffering/etc. Also possible the middleware has cached data and skips calling the Admin API entirely. You have to consider API call rates in your approach regardless.
3. the middleware passes info back via the response to the ajax call. With that data you do whatever you need to on a front end perspective.

What are you trying to do that needs a call to the Admin API in the first place?

[I_KNOW_NOTHING]

Hi Jason,

Thank you for quick reply,

what I am using is an GraphQL Admin API. This is my sample query

var query = `{

  productVariants(first:1, query:"barcode:${sku}") {

    edges {

      node {

        inventoryQuantity

        legacyResourceId

        barcode

        price

        compareAtPrice

        availableForSale

      }

    }

  }

}`;
$.ajax( {
url: 'https://www.domain.myshopify.com/admin/api/2019-10/graphql.json',

method: 'POST',

data: JSON.stringify({query}),

headers: {"X-Shopify-Access-Token": "PRIVATEAPPTOKEN"},

         crossDomain: true,

         success: function(response){

              console.log(response);

         }

})

I am using a Private APP token.

[globalxmart]

we are currently facing this issue in our store, can you show us how to implement it ???

[stefanH]

Can you show me your code?

PS: don't show the real api password or any private details

[lawwantsin]

This is not solved.  What about the Storefront API.  Does that require a backend too?  I literally can't get a straight answer out of this forum because every question is about a different kind of API.  Public, private, custom.  Dudes.  Make better docs.

[Nesters]

Think of it this way:

Storefront API is a public API and the token for it is meant to be used on the client side.

Admin API is a private API and the token is not meant to be shared publicly. If you share this token to everyone by making requests from the browser, they can potentially access private information about your store, financial information, CUSTOMER information etc. 

This could lead to both inconvenience to your customers as they would be subject to fraud as well as you could run into legal issues if someone decides to sue you because of it.

Hence, Shopify throws a CORS error when detecting that you use a browser to send a request to a private API. While the CORS error might not be the most appropriate response here, it is valid for them to deny your request.

Hope that clarifies the issue for others encountering this error.

[lawwantsin]

It doesn't clear up the issue because it doesn't answer my question.  It only reitterates other docs.

The question is Does Storefront API actually work Client-Side or are there unavoidable CORS issues that require a server-side proxy?

I'm not talking about the difference between Storefront and Admin.

You sound like a bot.