javascript - 从文件 ://URL 运行的应用程序发出的请求的 “Origin null is not allowed by Access-Control-Allow-Origin” 错误

Question

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

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. Origin null is not allowed by Access-Control-Allow-Origin.

如果我直接从浏览器查询该 URL，它可以正常工作。发生了什么事，我可以解决这个问题吗？我是否错误地编写了我的查询，或者这是否是 Panoramio 阻碍我尝试做的事情？

Google 没有在 error message 上找到任何有用的匹配项.

编辑

这里有一些显示问题的示例代码:

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

您可以run the example online .

编辑 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 header 出现的地方。

2. 我相信您提到过您是从 file://URL 运行它的。 CORS header 有两种方式表明跨域 XHR 正常。一个是发送 Access-Control-Allow-Origin: * (如果你是通过 $.get 访问 Flickr，他们一定是这样做的)，而另一个是回显 Origin header 的内容。但是，file:// URL 会产生一个空的 Origin，无法通过回显授权。

Darin 建议使用 $.getJSON 以迂回的方式解决了第一个问题。如果它在 URL 中看到子字符串 callback=?，将请求类型从其默认的“json”更改为“jsonp”会有点神奇。

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

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

1. 如果您尝试使用 JSONP，请确保满足以下条件之一:
   • 您正在使用 $.get 并设置 dataType到 jsonp.
   • 您正在使用 $.getJSON 并在 URL 中包含 callback=?。
2. 如果您尝试通过 CORS 进行跨域 XMLHttpRequest...
   1. 确保您通过 http:// 进行测试。通过 file:// 运行的脚本对 CORS 的支持有限。
   2. 确保浏览器 actually supports CORS . (Opera 和 Internet Explorer 迟到了)