XmlHttpRequest错误:Access-Control-Allow-Origin不允许使用Origin null

我正在开发一个页面,该页面通过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=150Access-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

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

$().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...
  });
});
神奇飞云2020/03/12 15:29:31

上面CodeGroover发布的解决方案中有一个小问题,即如果您更改文件,则必须重新启动服务器才能实际使用更新的文件(至少在我的情况下)。

所以搜索了一下,我发现这个要使用:

sudo npm -g install simple-http-server # to install
nserver # to use

然后它将在投放http://localhost:8000

JinJinTom2020/03/12 15:29:31

确保您使用的是最新版本的JQuery。我们遇到了针对JQuery 1.10.2的错误,使用JQuery 1.11.1后该错误已得到解决

AEva伽罗2020/03/12 15:29:31

我在Chrome中也遇到了相同的错误(我没有测试其他浏览器)。这是由于我浏览的是domain.com而不是www.domain.com。有点奇怪,但是我可以通过在.htaccess中添加以下几行来解决问题。它将domain.com重定向到www.domain.com并解决了问题。我是一个懒惰的Web访问者,所以我几乎从不键入www,但在某些情况下显然是必需的。

RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]
番长神乐小小2020/03/12 15:29:31

我使用Apache服务器,所以我使用过mod_proxy模块。启用模块:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

然后加:

ProxyPass /your-proxy-url/ http://service-url:serviceport/

最后,将proxy-url传递给脚本。

Harry飞云2020/03/12 15:29:31

如果您正在进行本地测试或通过类似方法调用文件,file://则需要禁用浏览器安全性。

在MAC上: open -a Google\ Chrome --args --disable-web-security

LEY古一阿飞2020/03/12 15:29:31

我们通过http.conf文件对其进行了管理(已编辑,然后重新启动了HTTP服务):

<Directory "/home/the directory_where_your_serverside_pages_is">
    Header set Access-Control-Allow-Origin "*"
    AllowOverride all
    Order allow,deny
    Allow from all
</Directory>

在中Header set Access-Control-Allow-Origin "*",您可以放置​​一个精确的URL。

小胖Davaid2020/03/12 15:29:31

就我而言,相同的代码在Firefox上可以正常工作,但在Google Chrome上却不能。谷歌浏览器的JavaScript控制台说:

XMLHttpRequest cannot load http://www.xyz.com/getZipInfo.php?zip=11234. 
Origin http://xyz.com is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"

我必须删除Ajax URL的www部分,以使其与原始URL正确匹配,然后工作正常。

Near西里泡芙2020/03/12 15:29:31

据记录,据我所知,您有两个问题:

  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并将其设置dataTypejsonp
    • 您正在使用$.getJSON并包含callback=?在URL中。
  2. 如果您尝试通过CORS执行跨域XMLHttpRequest ...
    1. 确保您通过进行测试http://通过运行的脚本file://对CORS的支持有限。
    2. 确保浏览器实际上支持CORS(Opera和Internet Explorer迟到了)
逆天小卤蛋Green2020/03/12 15:29:31

对于一个简单的HTML项目:

cd project
python -m SimpleHTTPServer 8000

然后浏览您的文件。

Mandy猴子2020/03/12 15:29:31

只要请求的服务器支持JSON数据格式,请使用JSONP(JSON填充)接口。它使您可以发出外部域请求,而无需代理服务器或精美的标题。

小小西门2020/03/12 15:29:31

这是相同的原始策略,您必须使用JSON-P接口或在同一主机上运行的代理。