-1

I'm relatively new to react and wanted to create an app that uses the Bigcommerce API to change product data submitted by the user through a form. My idea is to have a simple form for the user to input a quantity, for example. Once the user submits the quantity the want to change, the new number will be reflected on the product page on Bigcommerce Admin pages.

I have already created the same kind of app with Node with no front end. The app I made reads a csv file and calls the proper APIs to update their quantities. I wanted to create sort of the same app but in React with no csv reading abilities. I am having trouble with CORS errors now for some reason. I tried creating a backend with Node for this React app but I still get the same error.

I tried some other API. one that does not require authentication and that worked fine. I was able to see results when I do the console.log(data).

It seems that this Bigcommerce API won't work because it requires authentication, which I already have made on their backend several times to double check my work. I'm confused and not convinced that there is no way for a react app to fetch data from a remote server with credentials.

bader322
  • 17
  • 1
  • Does this answer your question? [Node.js CORS error](https://stackoverflow.com/questions/49031758/node-js-cors-error) – Tanishq Vyas Dec 13 '21 at 12:34
  • not really. I have already looked at this post. I have tried using an API that does not require authentication and it worked on the react app only. but when I change the call to an API that requires authentication for which I have credentials, I can't make it work for some reason. – bader322 Dec 13 '21 at 14:34
  • Please provide enough code so others can better understand or reproduce the problem. – Community Dec 19 '21 at 14:21

1 Answers1

0

I figured it out, but I'm still convinced that I can do this with only a front end application in React. Without Node, However.

What I did was create an endpoint with Express using Node as the backend. Installed cors modules, then allowed requests coming from the front end URL address. Also, pay attention to whether you are using localhost:PORT# or 127.0.0.1:PORT#

to the browser these are different. Make sure they're the same when you open up the browser.

bader322
  • 17
  • 1
  • In order to change product quantities, you'll be using the BigCommerce Management API. While technically possible to authenticate and use that API directly from a React UI in a browser, you would be exposing your secret access token. So unless the React app is a secure, internal app for trusted users, your strategy of going through your own Node API is the right way to go. ☕️ – TroyWolf Dec 17 '21 at 14:23