Question

从 file:// URL 运行的应用程序发出的请求出现“Access-Control-Allow-Origin 不允许 Origin 为空”错误

2010-08-29

834953

javascript jquery xmlhttprequest cors jsonp

我正在开发一个页面，通过 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 在错误消息中未找到任何有用的匹配项。

编辑

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

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

感谢 Darin 对此提供的帮助。 以上代码错误。 请使用以下代码：

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

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

您没有将“jsonp”类型说明符传递给您的 $.get ，因此它使用的是普通的 XMLHttpRequest。但是，您的浏览器支持 CORS（跨域资源共享），如果服务器允许，则允许跨域 XMLHttpRequest。这就是 Access-Control-Allow-Origin 标头的作用所在。
我相信您提到过您是从 file:// URL 运行它的。CORS 标头有两种方式来表示跨域 XHR 是可以的。一种是发送 Access-Control-Allow-Origin: * （如果您通过 $.get 访问 Flickr，他们一定已经这样做了），而另一种是回显 Origin 标头的内容。但是， file:// URL 会产生一个空的 Origin ，无法通过 echo-back 进行授权。

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

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

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

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

Answer 2

您可能需要在调用的脚本中添加 HEADER，以下是我在 PHP 中必须执行的操作：

header('Access-Control-Allow-Origin: *');

Answer 3

对于简单的 HTML 项目：

Python 2

cd project
python -m SimpleHTTPServer 8000

Python 3

cd project
python -m http.server 8000

然后浏览您的文件。