Skip to main content

Overcoming CORS while testing SPA locally

One of the common problems you common across while developing SPA or hybrid mobile apps locally is that when you make a cross domain API call, this is what you get in your console window


XMLHttpRequest cannot load http://jsonplaceholder.typicode.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. 

The reason for this is the browser security is preventing cross domain Ajax call. You can read more about CORS here.

As a developer you don't want to worry about this and you just want to drink your coffee, write awesome code and test it your machine.

Cool! I do the same!

Here is a little secret. You can tell Chrome to ignore the security and allow cross domain request. To do this, create a new shortcut for Chrome and pass these parameters.
  --disable-web-security --user-Agent="Android" --user-data-dir="c:/temp-chrome-eng"

user-Agent is optional but other two are required to make it work. So your shortcut should look like this

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-Agent="Android" --user-data-dir="c:/temp-chrome-eng"

Name the short cut as Chrome-X-Domain to make it obvious that you are running under less security. Now click on the shortcut to start the browser. Chrome will warn you that you are using unsupported command line. You can ignore that. Now fire up your application and you can make cross domain api calls.

Please leave a comment or share this post if you found it useful and if it saved you hours scratching your head on how to test cross domain api calls.

Happy programming!


Comments

Popular posts from this blog

Why there is semicolon at the start of a JavaScript function?

Very often while reviewing the code for my team, I will come across a semicolon at the start of JavaScript function as show below ; (function () { 'use strict'; ...and I often wondered what purpose it served. Guess what. It is an insurance to make sure your script works fine when all other scripts are merged together;  The leading ; in front of immediately-invoked function expressions (iffe) is there to prevent errors when appending the file during concatenation to a file containing an expression not properly terminated with a ;. So there you go. Now you know what that little semicolon is doing there in your code.

What is Event Sourcing?

If you scratching your head and wondering what is Event Sourcing, this is a very good article to start. https://www.erikheemskerk.nl/event-sourcing-awesome-powerful-different/ I couldn't have explained it any better.