Angular2 – Disable CORS security for smooth Chrome debug

Recently while debugging an application I needed to design REST and JSON api calls across DNS domains.   However, the client browser Chrome blocked those HTTP transactions due to CORS.    While essential to production security, this can be a roadblock to developer productivity locally.   The below steps show how to launch Chrome browser with CORS security temporarily disabled.   This can help remove complexity and security warnings to focus first on application features.

Once stable, we can add CORS support to the endpoint APIs (HTTP header Access-Control-Allow-Origin:*)  and calling JS application.

Install Steps

1. Create empty folder C:\CHROME\
2. Edit PowerShell profile script PS1  (notepad $profile)
3. Add function chromecors()
4. From CMD run “ng serve” to open local Angular hosting
5. From CMD run “chromecors” to launch Chrome with CORS disable
6. Enjoy debug and functional application testing without security warnings
7. Add CORS support to endpoint APIs as needed.  https://enable-cors.org/ has great advice on configuration.

Code

# Chrome Disable CORS
function chromecors() {
	TASKKILL /F /IM chrome.exe
	Start-Process -FilePath "c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -ArgumentList @("--disable-web-security", "--user-data-dir=""C:\Chrome""")
}

Screenshot