javascript - XmlHttpRequest错误：Access-Control-Allow-Origin不允许使用原点null(XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin)

Question

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

(我正在开发一个页面，该页面通过jQuery的AJAX支持从Flickr和Panoramio中提取图像。)

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

(Flickr方面运行良好，但是当我尝试从Panoramio进行$.get(url, callback)时，我在Chrome的控制台中看到一个错误：)

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 .

(XMLHttpRequest无法加载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.

(Access-Control-Allow-Origin不允许使用Origin null。)

If I query that URL from a browser directly it works fine.

(如果我直接从浏览器查询该URL，它将正常工作。)

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?

(我是在错误地编写查询，还是Panoramio这样做妨碍了我的工作？)

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

(Google并未在错误消息中显示任何有用的匹配项。)

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

(编辑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...
  });
});

  ask by Drew Noakes translate from so

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.

   (您没有在$.get传递“ jsonp”类型说明符，因此它使用的是普通的XMLHttpRequest。)

   However, your browser supported CORS (Cross-Origin Resource Sharing) to allow cross-domain XMLHttpRequest if the server OKed it.

   (但是，您的浏览器支持CORS（跨域资源共享），如果服务器确定，则允许跨域XMLHttpRequest。)

   That's where the Access-Control-Allow-Origin header came in.

   (那就是Access-Control-Allow-Origin头文件的来源。)

2. I believe you mentioned you were running it from a file:// URL.

   (我相信您提到您是通过file：// URL运行它的。)

   There are two ways for CORS headers to signal that a cross-domain XHR is OK.

   (CORS标头有两种方式来表示跨域XHR正常。)

   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.

   (一种是发送Access-Control-Allow-Origin: * （如果您是通过$.get到达Flickr的，则必须这样做），另一种是回显Origin头的内容。)

   However, file:// URLs produce a null Origin which can't be authorized via echo-back.

   (但是， file:// URL会产生一个空的Origin ，不能通过回显来授权。)

The first was solved in a roundabout way by Darin's suggestion to use $.getJSON .

(第一次通过Darin的建议使用$.getJSON来$.getJSON 。)

It does a little magic to change the request type from its default of "json" to "jsonp" if it sees the substring callback=?

(如果看到子字符串callback=?将请求类型从其默认值“ json”更改为“ jsonp”有点神奇callback=?)

in the URL.

(在网址中。)

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

(这样就解决了第二个问题，不再尝试从file:// URL执行CORS请求。)

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:

   (如果您尝试使用JSONP，请确保符合以下条件之一：)

   • You're using $.get and set dataType to jsonp .

     (您正在使用$.get并将dataType设置为jsonp 。)

   • You're using $.getJSON and included callback=?

     (您正在使用$.getJSON并包含callback=?)

     in the URL.

     (在网址中。)

2. If you're trying to do a cross-domain XMLHttpRequest via CORS...

   (如果您尝试通过CORS进行跨域XMLHttpRequest ...)

   1. Make sure you're testing via http:// .

      (确保您正在通过http://进行测试。)

      Scripts running via file:// have limited support for CORS.

      (通过file://运行的脚本对CORS的支持有限。)

   2. Make sure the browser actually supports CORS .

      (确保浏览器实际上支持CORS 。)

      (Opera and Internet Explorer are late to the party)

      (（Opera和Internet Explorer迟到了）)