XmlHttpRequest错误:Access不允许源null

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

Flickr方面工作正常,但是当我尝试从Panoramio获取$.get(url, callback)时,我在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妨碍我想要做什么的事情?

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

据我所知,据记载,你有两个问题:

  • 您没有向您的$.get传递“jsonp”类型说明符,所以它使用的是普通的XMLHttpRequest。 但是,您的浏览器支持CORS(跨源资源共享),以便在服务器允许的情况下允许跨域XMLHttpRequest。 这就是Access-Control-Allow-Origin标题出现的地方。

  • 我相信你提到你是从file:// URL运行它的。 CORS头有两种方式表示跨域XHR正常。 一种是发送Access-Control-Allow-Origin: * (如果你通过$.get到达Flickr,它们一定是做的),而另一个是回显Origin头部的内容。 但是, file:// URL会产生无法通过回显授权的null Origin

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

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

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

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

  • 你需要在被调用的脚本中添加一个HEADER,这就是我在PHP中必须做的事情:

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

    更多详情,请访问Cross domain AJAX ou services WEB(法文版)。


    对于一个简单的HTML项目:

    cd project
    python -m SimpleHTTPServer 8000
    

    然后浏览你的文件。

    链接地址: http://www.djcxy.com/p/22301.html

    上一篇: XmlHttpRequest error: Origin null is not allowed by Access

    下一篇: Drupal JSON POST from PhoneGap