Avoiding CORS errors on localhost (in 2020)

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:

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

Alternatively 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!

Comments

[Josue Valenica]

The files /Users/josue.valencia/—, /Users/josue.valencia/args, /Users/josue.valencia/—, /Users/josue.valencia/user-data-dir=”/tmp/chrome_dev_test”, /Users/josue.valencia/—, and /Users/josue.valencia/disable-web-security do not exist.

[Pacharapol Withayasakpunt]

1. What actual security risks on localhost do you have to accept if you disable CORS?
2. About cors-anywhere, you mean if I need to consume public APIs, right? It makes no sense to send data from localhost to online otherwise.
   • Indeed, another option is open your own Express server, with node-fetch or axios consuming public APIs. There is no CORS on the server side.
   • I don't think you should proxy your Express server with cors-anywhere; instead, set up proxy properly in Webpack-dev-server.

[Andy Potts]

Good points, I should have made this more clear in my post.

1. If you're developing on localhost using APIs you know and trust there are no security risks. If you're browsing the web with CORS disabled you're potentially leaving yourself open to attacks.

2. Yes, if you're consuming public APIs. The CORS anywhere public demo was supposed to be a quick alternative solution. You might be right about adding a proxy within webpack Dev server, I'll take a look at that as a third option!

[Krisztina Závecz]

Thank you for the article!
Just a heads-up: suggestion nr. 3 unfortunately does not work anymore (since January 2021), see this issue:
github.com/Rob--W/cors-anywhere/is...