Client-side connection to Graphql API fails due to CORS

Highlighted
Tourist
9 0 1

Hi all,

 

I've started to make an app which should work de facto server-less (except of the oauth process). The entire logic is written in JS which is embedded in a html file which is actually the one and only entry point for the app. The app should make some graphql queries and mutations. As I said, server-less, graphql communcation should run between browser and graphql api. The problem is, that the client can not send the request to graphql api due to the CORS. I need to use the fetch option " mode: 'cors' " to transmit the header "X-Shopify-Access-Token", but this does not work, because the graphql server hasn't set Access-Control-Allow-Headers and Access-Control-Allow-Origin for my advantage.

 

So the basic question is, how to establish a server-less communcation between browser and graphql api?

0 Likes
Highlighted
Shopify Partner
1777 211 370

You have to use Storefront API instead of admin API - https://help.shopify.com/en/api/storefront-api/getting-started

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
Highlighted
Tourist
7 0 6

The Storefront API also has CORS issues.  From localhost I get the following error when trying to call into the myshopify.com/api/2019-07/graphql endpoint.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://nadamoo.myshopify.com/api/2019-07/graphql. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing.

 

Is there direct access via some whitelist or do we need to use a backend server?  I can't seem to get a straight answer from all of the CORS questions on this forum.

1 Like
Highlighted
Tourist
9 0 1

Hey Shopify Staff,

 

de facto every app in the Shopify Apps Store is running on an untrusted server. Some dude (app vendor) creates an app which routes the store data through his backend server, because of CORS, which doesn't allow him to access the Admin Rest or Graphql API directly from the browser/client.

 

An example of many: https://apps.shopify.com/dhl-parcel

This app fetches the store's order/customer/shipping data and pushes it to the DHL API to create a shipping label. Classic case!

Before the data arrives the DHL API, it gets routed and processed trough the vendor's server. So this middleware can read, write, store the data at his leisure.

Now look at the app detail page. It seems that the vendor is represented by tom-it.nl. If you open the page, you will find a kind of blog. No imprint and/or contact page can be found. The site doesn't run on https. The meta title of his page is "software / security engineer & photography enthousiast".

So what does it tell me:

- The best thing is that great people like Tom and other developers can easily use the Shopify API/SDK to create awesome apps.

- On the other side, one of the worst things in the Shopify ecosystem is that the customer's senstive data (in current times of rigorous GDPR) gets shared unnecessarily to untrusted vendors, and their untrusted and unsecured servers. Why do I say "unsecured servers"? Because Tom and even companies simply don't invest an appropriate amount of effort and money to keep the security on a high level.

 

That's why I created this post, because I don't wan't to deal with customer's data. So maybe I am wrong and someone like Tom or others can tell me how to write a client-only Shopify app.

 

Long-term solution:

I would like to see Shopify introducing a new plattform where I can host my app. This plattform should be hosted and secured by Shopify, so that my part is just writting apps. I would even pay for it. If you ever heard about Google Apps Script, then you know what I mean. Check it out: https://developers.google.com/apps-script

1 Like