React webpack proxy (fixing CORS)

Here simply i`m going to show you how to fix CORS issue in reactjs app.

01) Create a sample react app or you can download my minimal react app.

02) Then create a sample node API or you can download my minimal node API.

03) Now modify the react code to fetch data from the node-API or you can download the modified react app from here.

when you run it, in the browser console you can see following CORS error.

There are two main methods to solve this issue.

First method :- Enabling CORS in the API if have the control of it.

So enable CORS in your node-API or download the modified node-API from here. When you run it you can see the API response successfully.

Second method :- Adding proxy configuration to your react-app if you don`t have the API control.

So add proxy in webpack configuration of your react app or download the modified code from here.

Any of this ways you can fix CORS problem in your reactjs app.

Cheers……!!!