Enabling CORS in Create React App utility

If you are needing this for development and wanting to access an api from your react app but getting an error like this-

Failed to load http://localhost:8180/tables: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8180'that is not equal to the supplied origin. Origin 'http://localhost:3000' istherefore not allowed access. Have the server send the header with a validvalue, or, if an opaque response serves your needs, set the request's mode to'no-cors' to fetch the resource with CORS disabled.

then you can get the create-react-app server to proxy your request to your api server quite easily.

create-react-app uses the webpack development server to serve your react app.

So if your react app is being served from http://localhost:3000 and the api you want to connect to is at http://localhost:8180/tables you can simply add a proxy value into your react app's package.json file like this-

proxy: "http://localhost:8180",

then from your react app call your api like

fetch('/tables').then(....)

the request will be sent to the create-react-app server which will send it on to the api server and return the results for you.

Full details here Proxying API Requests in Development

SIMPLER SOLUTION IS:

Because the server from create-react-app is only used during development, then you can use additional extensions on each browser to resolve the issue. Here are some extensions that you can use to solve CORS problems during development stage:

• Extension for Chrome
• Extension for Firefox
• Extension for Opera

There is Whitelist features that can use to activated the extension in only specified websites. So don't worry about the security.

Of course, at the production stage you can solve CORS problems on your respective server, so at this stage, the browser extension is no longer needed.