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.

C# Performance Improvement - The Power of StringBuilder

 Often when we are wring code we don't think about performance and go with the default options available to achieve a task. String concatenation is one such scenario. If you are doing simple and few string catenations, then you can use the following result = string1 + string2; string1+= string2; result = String.Concat(string1,string2); String.Format and string interpolation are few other options.  However when you are performing large and repetitive  operation, string catenation can be expensive. Here is an example to prove the point.  As you can see it took 41 seconds to perform 100k string catenation. Now lets replace this with StringBuilder and see.  8 ms!!!!!! That is a massive performance difference. Hope you get the point. More info on StringBuilder can be found here https://learn.microsoft.com/en-us/dotnet/api/system.text.stringbuilder?view=net-7.0