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.
