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

Question

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, ca

Answer 1

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.
2. If you're trying to do a cross-domain XMLHttpRequest via CORS...
   1. Make sure you're testing via http://. Scripts running via file:// have limited support for CORS.
   2. Make sure the browser actually supports CORS. (Opera and Internet Explorer are late to the party)