XmlHttpRequest错误：访问控制Allow Origin不允许Origin为空

Question

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

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

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。Access-
Control-Allow-Origin不允许使用Origin null。

如果我直接从浏览器查询该URL，它将正常工作。这是怎么回事，我可以解决这个问题吗？我是在错误地编写查询，还是Panoramio这样做妨碍了我的工作？

编辑

这是一些显示问题的示例代码：

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

编辑2

感谢达林在这方面的帮助。 上面的代码错误。 使用此代替：

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

Answer 1

据记录，据我所知，您有两个问题：

1. 您没有向您传递“ jsonp”类型说明符$.get，因此它使用的是普通的XMLHttpRequest。但是，您的浏览器支持CORS（跨域资源共享），如果服务器确定，则允许跨域XMLHttpRequest。那是Access-Control-Allow-Origin头文件进入的地方。

2. 我相信您提到您是通过file：// URL运行它的。CORS标头有两种方式来表示跨域XHR正常。一种是发送Access-Control-Allow-Origin: *（如果您通过到达Flickr $.get，他们一定在发送），另一种是回显Origin标头的内容。但是，file://URL产生的null Origin不能通过回显进行授权。

达林的使用建议以一种round回的方式解决了第一个问题$.getJSON。如果看到callback=?URL中的子字符串，将请求类型从其默认值“
json”更改为“ jsonp”确实有点魔术。

通过不再尝试从file://URL 执行CORS请求，解决了第二个问题。

为了向其他人说明，以下是简单的故障排除说明：

1. 如果您尝试使用JSONP，请确保符合以下条件之一：
   • 您正在使用$.get并将其设置dataType为jsonp。
   • 您正在使用$.getJSON并包含callback=?在URL中。
2. 如果您尝试通过CORS执行跨域XMLHttpRequest …
   1. 确保您通过进行测试http://。通过运行的脚本file://对CORS的支持有限。
   2. 确保浏览器实际上支持CORS。（Opera和Internet Explorer迟到了）