XmlHttpRequest错误：Access-Control-Allow-Origin不允许使用Origin null [英] XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

问题描述

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

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

Flickr端工作正常但是当我尝试<$来自Panoramio的c $ c> $。get（url，callback），我在Chrome的控制台中看到错误：

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

XMLHttpRequest无法加载 http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&& ;偏移= 0&安培;长度= 20&安培;回调= processImages&安培;风骚女子= -30安培; MINY = 0&安培; MAXX = 0&安培; MAXY = 150 。 Access-Control-Allow-Origin不允许使用null。

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会阻碍我正在尝试做的事情？

If I query that URL from a browser directly it works fine. 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?

Google没有发现任何有用的匹配错误消息。

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

编辑

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

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

你可以在线运行示例。

编辑2

感谢Darin对此的帮助。 上面的代码错误。请改用：

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

推荐答案

据记载，据我所知，你有两个问题：

For the record, as far as I can tell, you had two problems:

1. 你没有将jsonp类型说明符传递给 $ .get ，所以它使用普通的XMLHttpRequest。但是，如果服务器对其进行了确认，则您的浏览器支持CORS（跨源资源共享）以允许跨域XMLHttpRequest。这就是 Access-Control-Allow-Origin 标头的位置。

1. You weren't passing a "jsonp" type specifier to your $.get, so it was using an ordinary XMLHttpRequest. However, your browser supported CORS (Cross-Origin Resource Sharing) to allow cross-domain XMLHttpRequest if the server OKed it. That's where the Access-Control-Allow-Origin header came in.

我相信你提到了你从文件：// URL运行它。 CORS头有两种方式表示跨域XHR是正常的。一种是发送 Access-Control-Allow-Origin：* （如果你通过 $到达Flickr。获取，他们一定在做）而另一个是回显 Origin 标题的内容。但是， file：// URL产生null Origin ，无法通过echo-back授权。

I believe you mentioned you were running it from a file:// URL. There are two ways for CORS headers to signal that a cross-domain XHR is OK. 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. However, file:// URLs produce a null Origin which can't be authorized via echo-back.

第一个问题是Darin建议使用 $。getJSON 。如果它在URL中看到子字符串 callback =？，则将请求类型从其默认的json更改为jsonp，这有点神奇。

The first was solved in a roundabout way by Darin's suggestion to use $.getJSON. It does a little magic to change the request type from its default of "json" to "jsonp" if it sees the substring callback=? in the URL.

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

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

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

To clarify for other people, here are the simple troubleshooting instructions:

1. 如果您正在尝试要使用JSONP，请确保以下情况之一：
   
   
   
   
   • 您正在使用 $。get 并将 dataType 设为 jsonp 。
   
   
   • 您正在使用 $。getJSON 并包含<$ c网址中的$ c> callback =？。
   
   

1. If you're trying to use JSONP, make sure one of the following is the case:
   • You're using $.get and set dataType to jsonp.
   • You're using $.getJSON and included callback=? in the URL.

1. 确保通过 http：// 进行测试。通过 file：// 运行的脚本对CORS的支持有限。


2. 确保浏览器实际上支持CORS 。 （Opera和Internet Explorer迟到了）

1. Make sure you're testing via http://. Scripts running via file:// have limited support for CORS.
2. Make sure the browser actually supports CORS. (Opera and Internet Explorer are late to the party)

这篇关于XmlHttpRequest错误：Access-Control-Allow-Origin不允许使用Origin null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！