jQuery CORS – Fix XMLHttpRequest Origin Null Not Allowed

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)

Origin null is the local file system, so that suggests that you're loading the HTML page that does the load call via a file:/// URL (e.g., just double-clicking it in a local file browser or similar).

Most browsers apply the Same Origin Policy to local files by disallowing even loading files from the same directory as the document. (It used to be that Firefox allowed the same directory and subdirectories, but not any longer.

Basically, using ajax with local resources doesn't work.

If you're just testing something locally that you'll really be deploying to the web, rather than use local files, install a simple web server and test via http:// URLs instead. That gives you a much more accurate security picture. Your IDE may well have some kind of server built in (directly or via an extension) that lets you just hit "run" in the IDE and have the server fired up and serving the file.