Dealing with CORS when developing React apps locally

By March 4, 2019react

When developing React apps, a common use pattern is to use something like Python and Flask to build a REST API server.

However, if you run both the development server and the client server locally, for example served from localhost:3000 and localhost:3001 respectively,  you run into Cross-Origin Resourse Sharing (CIORS) issues.

Create-react-app provide an easy way to deal with this using webpack by having the webpack development server proxy requests to the API server.

To implement this, simply add the following line to the client’s package.json file


"proxy":"http://localhost:5000/"

Then, when you make web requests from within your client, simply use the URL endpoint.  For example, instead of “localhost:5000/users” simply use “/users”.

No more CORS issues in local development.


References: