Disable cross origin for localhost

Note — This article is only intended to be used for local development purpose. Please don’t use these techniques for an actual/production environment.

What is cross origin? As per definition provided over MDN

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.
An example of a cross-origin request: The frontend JavaScript code for a web application served from http://domain-a.com uses XMLHttpRequest to make a request for http://api.domain-b.com/data.json.

In another words the host, port and the protocol used for both the resources should be same then only they will be called as from same origin.

We often use localhost setup while development and our servers(frontend/backend) are using different url schemes(host/protocol).

In such scenarios, browser greets us with ‘Cross Origin’ errors. As a result a developer requires to disable this policy in order to continue the development while serving whole content from its localhost.

Lets learn how to disable cross origin policy for different browsers

1. Chrome Browser(66+) on windows

Make sure all instance of chrome browser all closed

Open command prompt using ‘cmd’, go to the root of C: drive and run the following command

“Program Files (x86)\Google\Chrome\Application\chrome.exe” –-allow-file-access-from-files — disable-web-security — user-data-dir — disable-features=CrossSiteDocumentBlockingIfIsolating

2. Chrome Browser on MacOS

Make sure all instance of chrome browser all closed.

Open terminal on mac and run the following command

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome — disable-web-security — allow-file-access-from-files — allow-file-access

3. Firefox

For firefox you can simply install ‘CORS Everywhere’ addon

I hope you’ve enjoyed reading, and this article might prove helpful to you.