Using the Shopify API in the Front-End

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:

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?

FYI: I'm a Front-End Developer, and not very comfortable with any Back-End tech. Hence my confusion around this.

Appreciate any tips or advice you have.

via Julian Jorgensen