Question posted in 
I’m building a stand-alone Web App built in Javascript (React + Redux to be specific). I’ve had great success using the Shopify Buy SDK to pull in data from my Shopify store. However, as I need to use the [main Shopify API][2] to add products and other advanced features that the Buy SDK doesn’t support.
I can successfully connect to the Shopify API from the server side (using NodeJS), but when I try and do the same connection in the Front-End (I of course retrieve the app keys and secret tokens through my .env environment variable for security reasons):
axios.get('https://<app-key>:<app-password>@rmc-preview.myshopify.com/admin/orders.json').then((data) => {
console.log('data: ', data);
});
, then I get a “Access-Control-Allow-Origin” error:
XMLHttpRequest cannot load https://rmc-preview.myshopify.com/admin/orders.json. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000‘ is therefore not allowed access. The response had HTTP status code 401.
I’d like to connect both through my localhost as well as my public site (currently hosted through Netlify).
Do I need to connect with this API through server-side, or is it at all possible to connect through the Front-End?
Appreciate any tips or advice you have.
2
Answers
You can’t invoke such a thing on Shopify front-end for all the security matters. CORS and stuff. You need to route the request through a backend app that can utilize the API.
Node.js is something you are looking at right.
Even though your keys are in .env they get packaged up and are opened on the front end. You need to go the server API route
https://youtu.be/FcwfjMebjTU