Disable CORS for development

Saying "Disable CORS" is wrong because in reality CORS is mechanism which allows cross-origin resource sharing, more professional phrase is "disabling SOP". SOP is a Same Origin Policy – mechanism implemented inside of each secure browser (Chrome, Opera, Firefox, etc) which prevents some requests to be executed when origin of page which makes a request differs from origin of 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 requester has a domain localhost:3030 and resource is on origin localhost:8080. Read Explain SOP/CORS Like I am 5 to better understand it.

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

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

Access-Control-Allow-Origin: *

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

Second way is disabling SOP at all in your own, local browser. It is 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 able to call endpoints without correct CORS headers. But only you, no one else in the world.

For debug 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 some 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
1
Ivan Borshchov profile picture
Apr 23, 2017
by Ivan Borshchov
Did it help you?
Yes !
No

Best related