Origin null is not allowed by Access-Control-Allow-Origin

I got this error in Chrome while testing out a JQuery Mobile application. The problem was that JQuery Mobile app’s index.html was trying to open another local HTML file using “<a href="foo.html …". Opening local files is not allowed by default in Chrome (but works in Firefox and Safari). This is the kind of error you'd get in Chrome:

XMLHttpRequest cannot load file://.../foo.html. 
Origin null is not allowed by Access-Control-Allow-Origin.

To get rid of the error, you can enable local files in Chrome by adding "–allow-file-access-from-files" option (as explained here).

On Mac, I do this but running Chrome using the following command from terminal:

open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

Access-Control-Allow-Origin

Today, I got this error in Chrome as I was trying to make a HTTP request from localhost:8400 to localhost:2081:

XMLHttpRequest cannot load http://localhost:2080. Origin http://localhost:8400 is not allowed by Access-Control-Allow-Origin.

I know about Cross-site requests and I’m aware the reasons behind disallowing it but I’m a little surprised that these limitations apply to the same domains but different ports.

Charles is great!

I mean the Charles Web Debugging tool 🙂 I used it many times before to view HTTP requests/responses but last week, I had to not only view requests but had to slightly change the request to match an edge case. Turns out that, you can do this in Charles. Just right click on the request, click Edit, change the request to whatever you want and Repeat.

Within couple of minutes, I could reproduce the issue. Thanks Charles!