How to fix CORS errors on the development environment of a React application

Can't make a query from the browser since CORS blocks it

Whenever we're developing a React application that has to communicate with an API, we'll probably run into Cross-Origin Resource Sharing (CORS) errors. The error message will be similar to this:

Access to fetch at 'http://localhost:8081/auth' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

A CORS error may happen whenever a web application makes a request for a resource that has a different origin (domain, protocol, or port) from its own. In the case of the error message above, the web app which was served from http://localhost:3000 was making a request for http://localhost:8081/auth. Since the ports are different and localhost:8081 does not allow for CORS request, we got an error. You can read more about CORS here.

Solutions

There are two common ways to solve CORS issues in a development environment:

  1. Enable CORS on the API server.
  2. Configure a proxy on the development server that's serving the React application.

Depending on the context in which we're developing the application, it might not be possible, or desirable, to configure the API server to allow for CORS. Therefore, adding a proxy tends to be the preferable solution.

The idea behind using a proxy to solve this issue is simple. Instead of making a request directly to the API server, we'll be making a request to the development server and have the development server forward unknown requests to the API server. This way, the React application will be making requests to its own origin, therefore solving the CORS issue.

In order for the proxy solution to work, we need to make sure that the React app is making requests to the development server. So if we were using absolute paths to reach the API server, we'll now use relative ones to make the requests go to the development server instead. So if we have code like fetch('http://localhost:8081/auth'), we'll have to change it to fetch('/auth').

Given we're now making API requests to the development server, all that's left is to configure a proxy so the requests are forwarded to the API server.

How to exactly set up a proxy will depend on the set up of the React application. So I won't be going in detail on that in this article. It is usually easy, so don't worry. If you used Create React App (CRA) to set up your React application, you can check this page of their documentation on how to configure a proxy. If you're serving your React app with webpack-dev-server, this page of the documentation might be helpful. In case you're using other tools, looking up their documentation for proxy or making a google search should do the trick.

By now the CORS issue should be solved. However, if the API server is using https, you may need to configure the development server to use https as well. Yet again, how to do it will depend on the tools you're using. If you've used CRA to setup the application check this page, otherwise check the documentation of the tools you're using.

Conclusion

If you're facing a CORS issue when making a request to your API server, you can fix it with these steps:

  1. Make the requests to the API server go to the development server instead.
  2. Configure a proxy on the development server to forward unknown requests to the API server.
  3. If the API server uses https, configure the development server to use https as well.