javascript - XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

itemprop="text">

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 href="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"
rel="noreferrer">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 href="http://www.google.co.uk/search?q=%22Origin+null+is+not+allowed+by+Access-Control-Allow-Origin%22"
rel="noreferrer">error
message.

EDIT

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)
            {
 alert('ok');
 };

 eval(jsonp);

            });
});

You
can run the example
online.

EDIT
2

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...


            });
});

class="post-text" itemprop="text">

class="normal">Answer

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 rel="noreferrer">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)