Saying "Disable CORS" is wrong because in reality, CORS is a mechanism that allows cross-origin resource sharing, a more professional phrase is "disabling SOP". SOP is the Same Origin Policy – another mechanism implemented inside of each secure browser (Chrome, Safari, Firefox, etc) that prevents some requests to be executed when origin of page that makes a request differs from the origin of the requested resource. For example when domain a.com requests b.com/img.jpg or localhost:3030 makes request to localhost:8080/script.js. In the second case, the requester has a domain localhost:3030 and the resource is on the origin localhost:8080. Read Explain SOP/CORS Like I am 5 to better understand it.

If you are working both on the resource and requester side, in production you can place them both on one domain (e.g. using reverse-proxy like Nginx). In development mode, it is not super easy because you are probably working with dev-servers who are listening on different ports, and you can't make them listen on the same port. So now you have 2 options.

The first is to implement CORS on the requested resource side. What you basically need to do is just add one simple HTTP response header: 

Access-Control-Allow-Origin: *

This tells the browser to ignore SOP for any origins. If needed you can debug it in DevTools -> Network tab and find your blocked request, browser shows you all headers. And don't forget about security – apply it only if the environment is local, never set response header to this value in a production environment. Or at least replace * for one real domain but only if it's really needed.

In most cases it is much simpler and better to just enable CORS on serving (resource) side. All dev serverls includng Frontend (Vue, React, Angualr), Backend dev servers in Django, Node express, Flask, etc have an easy option to enable CORS. But first make sure you understand what CORS is it doing and why

The second way is disabling SOP at all in your own, local browser. It is a different way you can apply if you don't know how to add HTTP response headers, or if you have no access to requested resource response headers at all. If you will disable SOP in your own browser, it will not use same-origin restrictions and you will be able to call endpoints without correct CORS headers. But only you, no one else in the world.

For debugging purposes it is ok, but using it as your default browser for browsing other websites with your real data is not the best idea.

So you will need another browser that you do not use by default. Most of the developers use Chrome/Chromium as the default so I suggest using Opera for developing without CORS. Nowadays it based on chromium, so you will have your favorite dev tools inside still.

If you are on windows create launcher script (e.g. nocors.bat) which will turn off SOP in Opera:

TASKKILL /F /IM opera.exe


cd c:\Program Files\Opera\


launcher.exe --disable-web-security --user-data-dir="c:\nocorsbrowserdata"


pause

On linux/Mac it will be very same, like nocors.sh :

killall -9 opera


cd <opera bin folder>


launcher --disable-web-security --user-data-dir="/tmp/nocorsbrowserdata"

Then you can make a link on the desktop to this bat/sh and change an icon if you want.

Theoretically, all chromium based browsers may support the very same way to remove web security. TASKKILL/kilall is required because all other processes of opera must be stopped before launching without web security.

Opera and some other browsers may import your data dir on first run from default browser so just go to opera://settings/clearBrowserData and remove all otherwise you will be able accidently touch real site from your history which again is dangerous:

Image for a hint

Now you are ready! If it helped please press like so I will know that I need to create more hints like this!

Image for a hint

#cors #security