Avoiding CORS Errors on Localhost (in 2020)

Andy Potts
Jul 23 · 3 min read

When developing a website/web app on localhost which makes requests to another server, you might run into Cross Origin Resource Sharing (CORS) issues. I won’t go into too much detail about what CORS is in this post. All I will say is that CORS exists for security reasons, but when you’re developing locally it can be a pain! You can read more about CORS on the MDN docs.

I have written this simple guide to explain the main solutions for disabling cross origin restrictions on localhost (and therefore fixing any CORS errors whilst developing your app locally), which I will explain in more detail below.

1. Use the proxy setting in Create React App

Create React App comes with a config setting which allows you to simply proxy API requests in development. This is available in react-scripts@0.2.3. To do this add the proxy setting to your package.json like this

"proxy": "https://cat-fact.herokuapp.com/",

Now when you make an API request to https://localhost:3000/api/facts Create React App will proxy the API request to https://cat-fact.herokuapp.com/facts and the CORS error will be resolved.

This is a really simple solution which might not work with more complicated situations where multiple API’s are involved, or certain types of API authentication is needed.

2. Disable CORS in the browser

You can directly disable CORS in the browser. If you do this, please be aware that you are disabling security restrictions which are there for a reason. I wouldn’t recommend browsing the web with CORS disabled; Just disable it whilst developing your website/app.

Chrome (on Mac):

The most reliable way to disable CORS in the latest version of Chrome on Mac (tested on v84) is to run it with web security disabled.

  1. Force quit Chrome by going to the mac menu and pressing “force quit” (or pressing command Q).
  2. Then run this command to open Chrome with web security disabled
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome — args — user-data-dir=”/tmp/chrome_dev_test” — disable-web-security

Once you’re done developing, restart Chrome and it will go back to normal.

Firefox:

The easiest and most reliable way to disable CORS in Firefox is to install the CORS Everywhere plugin.

Safari:

The easiest and most reliable way to CORS in Safari is to disable CORS in the develop menu.

  1. Enable the develop menu by going to Preferences > Advanced.
  2. Then select “Disable Cross-Origin Restrictions” from the develop menu.

Once you’re done developing, restart Safari and it will go back to normal.

3. Use a proxy to avoid CORS errors

Finally you could use a proxy like cors-anywhere.

If you want to easily demo cors-anywhere, Rob — W has setup a public demo which is great for consuming public API’s as it requires no registration or config https://cors-anywhere.herokuapp.com. As it’s just a demo requests are limited.

To use the public demo of cors-anywhere, just add the url you want to make the request to after the domain e.g. https://cors-anywhere.herokuapp.com/https://cat-fact.herokuapp.com/facts (*if you view this in the browser you might get an error about a missing request header. When you make an API request using in your app using something like Axios or Fetch this won’t be an issue).

If you found this useful, have any questions, or want more content like this, feel free to follow me on twitter!

The Startup

Medium's largest active publication, followed by +704K people. Follow to join our community.

Andy Potts

Written by

Senior Software Engineer at the BBC. I write about front-end development, web performance and my time at the BBC. Opinions are my own

The Startup

Medium's largest active publication, followed by +704K people. Follow to join our community.

Andy Potts

Written by

Senior Software Engineer at the BBC. I write about front-end development, web performance and my time at the BBC. Opinions are my own

The Startup

Medium's largest active publication, followed by +704K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store