“Origin null is not allowed by Access-Control-Allow-Origin” error for request made by application running from a file:// URL


Javascript Problem Overview

I'm developing a page that pulls images from Flickr and Panoramio via jQuery's AJAX support.

The Flickr side is working fine, but when I try to $.get(url, callback) from Panoramio, I see an error in Chrome's console:

> XMLHttpRequest cannot load http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150. Origin null is not allowed by Access-Control-Allow-Origin.

If I query that URL from a browser directly it works fine. What is going on, and can I get around this? Am I composing my query incorrectly, or is this something that Panoramio does to hinder what I'm trying to do?

Google didn't turn up any useful matches on the error message.


Here's some sample code that shows the problem:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';
  $.get(url, function (jsonp) {
    var processImages = function (data) {

You can run the example online.


Thanks to Darin for his help with this. THE ABOVE CODE IS WRONG. Use this instead:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';
  $.get(url, function (data) {
    // can use 'data' in here...

Javascript Solutions

Solution 1 - Javascript

For the record, as far as I can tell, you had two problems:

  1. You weren't passing a "jsonp" type specifier to your $.get, so it was using an ordinary XMLHttpRequest. However, your browser supported CORS (Cross-Origin Resource Sharing) to allow cross-domain XMLHttpRequest if the server OKed it. That's where the Access-Control-Allow-Origin header came in.

  2. I believe you mentioned you were running it from a file:// URL. There are two ways for CORS headers to signal that a cross-domain XHR is OK. One is to send Access-Control-Allow-Origin: * (which, if you were reaching Flickr via $.get, they must have been doing) while the other was to echo back the contents of the Origin header. However, file:// URLs produce a null Origin which can't be authorized via echo-back.

The first was solved in a roundabout way by Darin's suggestion to use $.getJSON. It does a little magic to change the request type from its default of "json" to "jsonp" if it sees the substring callback=? in the URL.

That solved the second by no longer trying to perform a CORS request from a file:// URL.

To clarify for other people, here are the simple troubleshooting instructions:

  1. If you're trying to use JSONP, make sure one of the following is the case:
  • You're using $.get and set dataType to jsonp.
  • You're using $.getJSON and included callback=? in the URL.
  1. If you're trying to do a cross-domain XMLHttpRequest via CORS...
  2. Make sure you're testing via http://. Scripts running via file:// have limited support for CORS.
  3. Make sure the browser actually supports CORS. (Opera and Internet Explorer are late to the party)

Solution 2 - Javascript

You need to maybe add a HEADER in your called script, here is what I had to do in PHP:

header('Access-Control-Allow-Origin: *');

More details in Cross domain AJAX ou services WEB (in French).

Solution 3 - Javascript

For a simple HTML project:

cd project
python -m SimpleHTTPServer 8000

Then browse your file.

Solution 4 - Javascript

Works for me on Google Chrome v5.0.375.127 (I get the alert):

function(json) {

Also I would recommend you using the $.getJSON() method instead as the previous doesn't work on IE8 (at least on my machine):

function(json) {

You may try it online from here.


Now that you have shown your code I can see the problem with it. You are having both an anonymous function and inline function but both will be called processImages. That's how jQuery's JSONP support works. Notice how I am defining the callback=? so that you can use an anonymous function. You may read more about it in the documentation.

Another remark is that you shouldn't call eval. The parameter passed to your anonymous function will already be parsed into JSON by jQuery.

Solution 5 - Javascript

As long as the requested server supports the JSON data format, use the JSONP (JSON Padding) interface. It allows you to make external domain requests without proxy servers or fancy header stuff.

Solution 6 - Javascript

It's the same origin policy, you have to use a JSON-P interface or a proxy running on the same host.

Solution 7 - Javascript

If you are doing local testing or calling the file from something like file:// then you need to disable browser security.

On MAC: open -a Google\ Chrome --args --disable-web-security

Solution 8 - Javascript

We managed it via the http.conf file (edited and then restarted the HTTP service):

<Directory "/home/the directory_where_your_serverside_pages_is">
    Header set Access-Control-Allow-Origin "*"
    AllowOverride all
    Order allow,deny
    Allow from all

In the Header set Access-Control-Allow-Origin "*", you can put a precise URL.

Solution 9 - Javascript

In my case, same code worked fine on Firefox, but not on Google Chrome. Google Chrome's JavaScript console said:

XMLHttpRequest cannot load http://www.xyz.com/getZipInfo.php?zip=11234. 
Origin http://xyz.com is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"

I had to drop the www part of the Ajax URL for it to match correctly with the origin URL and it worked fine then.

Solution 10 - Javascript

As final note the Mozilla documentation explicitly says that

> The above example would fail if the header was wildcarded as: > *Access-Control-Allow-Origin: . Since the Access-Control-Allow-Origin explicitly mentions http://foo.example, > the credential-cognizant content is returned to the invoking web > content.

As consequence is a not simply a bad practice to use '*'. Simply does not work :)

Solution 11 - Javascript

Not all servers support jsonp. It requires the server to set the callback function in it's results. I use this to get json responses from sites that return pure json but don't support jsonp:

function AjaxFeed(){
	return $.ajax({
		url:			'http://somesite.com/somejsonfile.php',
		data:  			{something: true},
		dataType:		'jsonp',
		/* Very important */
		contentType: 	'application/json',

function GetData() {
	/* Everything worked okay. Hooray */
		return data;
	/* Okay jQuery is stupid manually fix things */
	.fail(function(jqXHR) {
		/* Build HTML and update */
		var data = jQuery.parseJSON(jqXHR.responseText);
		return data;

Solution 12 - Javascript

I use Apache server, so I've used mod_proxy module. Enable modules:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Then add:

ProxyPass /your-proxy-url/ http://service-url:serviceport/

Finally, pass proxy-url to your script.

Solution 13 - Javascript

For PHP - this Work for me on Chrome, safari and firefox


header('Access-Control-Allow-Origin: null');

using axios call php live services with file://

Solution 14 - Javascript

There is a small problem in the solution posted by CodeGroover above , where if you change a file, you'll have to restart the server to actually use the updated file (at least, in my case).

So searching a bit, I found this one To use:

sudo npm -g install simple-http-server # to install
nserver # to use

And then it will serve at http://localhost:8000.

Solution 15 - Javascript

I also got the same error in Chrome (I didn't test other browers). It was due to the fact that I was navigating on domain.com instead of www.domain.com. A bit strange, but I could solve the problem by adding the following lines to .htaccess. It redirects domain.com to www.domain.com and the problem was solved. I am a lazy web visitor so I almost never type the www but apparently in some cases it is required.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]

Solution 16 - Javascript

Make sure you are using the latest version of JQuery. We were facing this error for JQuery 1.10.2 and the error got resolved after using JQuery 1.11.1

Solution 17 - Javascript


I ran into a similar issue. But using Fiddler, I was able to get at the issue. The problem is that the client URL that is configured in the CORS implementation on the Web API side must not have a trailing forward-slash. After submitting your request via Google Chrome and inspect the TextView tab of the Headers section of Fiddler, the error message states something like this:

*"The specified policy origin your_client_url:/' is invalid. It cannot end with a forward slash."

This is real quirky because it worked without any issues on Internet Explorer, but gave me a headache when testing using Google Chrome.

I removed the forward-slash in the CORS code and recompiled the Web API, and now the API is accessible via Chrome and Internet Explorer without any issues. Please give this a shot.

Thanks, Andy


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDrew NoakesView Question on Stackoverflow
Solution 1 - JavascriptssokolowView Answer on Stackoverflow
Solution 2 - JavascriptThomas DecauxView Answer on Stackoverflow
Solution 3 - JavascriptCodeGrooverView Answer on Stackoverflow
Solution 4 - JavascriptDarin DimitrovView Answer on Stackoverflow
Solution 5 - JavascriptCheng ChenView Answer on Stackoverflow
Solution 6 - JavascriptQuentinView Answer on Stackoverflow
Solution 7 - Javascriptuser2701060View Answer on Stackoverflow
Solution 8 - Javascriptromu31View Answer on Stackoverflow
Solution 9 - JavascriptKalpesh PatelView Answer on Stackoverflow
Solution 10 - Javascriptuser2688838View Answer on Stackoverflow
Solution 11 - JavascriptmAsT3RpEEView Answer on Stackoverflow
Solution 12 - JavascriptimilbaevView Answer on Stackoverflow
Solution 13 - JavascriptTylerView Answer on Stackoverflow
Solution 14 - JavascriptMiJynView Answer on Stackoverflow
Solution 15 - JavascriptmslembroView Answer on Stackoverflow
Solution 16 - JavascriptGanesh Kamath - 'Code Frenzy'View Answer on Stackoverflow
Solution 17 - JavascriptandymenonView Answer on Stackoverflow