XmlHttpRequest错误：Access-Control-Allow-Origin不允许使用Origin null-Java 学习之路

513

我正在开发一个页面，通过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不允许使用null .

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

谷歌没有在error message上发现任何有用的比赛 .

EDIT

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

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

EDIT 2

感谢Darin对此的帮助 . THE ABOVE CODE IS WRONG. 使用此代替：

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

16 回答

411
我使用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传递给您的脚本 .
回复于 2024-05-10T20:10:23+08:00
75

只要请求的服务器支持JSON数据格式，就使用JSONP（JSON Padding）接口 . 它允许您在没有代理服务器或花哨的标头内容的情况下发出外部域请求 .

回复于 2024-05-10T20:10:23+08:00
68

如果您正在进行本地测试或从 file:// 调用该文件，则需要禁用浏览器安全性 .

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

回复于 2024-05-10T20:10:23+08:00
0

确保您使用的是最新版本的JQuery . 我们在JQuery 1.10.2中遇到了这个错误，并且在使用JQuery 1.11.1之后错误得到了解决

回复于 2024-05-10T20:10:23+08:00
1
你需要在你的被调用脚本中添加一个HEADER，这是我在PHP中必须做的事情：
```
header('Access-Control-Allow-Origin: *');
```
更多细节在Cross domain AJAX ou services WEB（法文） .
回复于 2024-05-10T20:10:23+08:00
4
我们通过 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 .
回复于 2024-05-10T20:10:23+08:00
0

最后注意到Mozilla documentation explicitly says

如果标头被通配为：Access-Control-Allow-Origin：*，则上述示例将失败 . 由于Access-Control-Allow-Origin明确提到了http：//foo.example，因此将凭证识别内容返回到调用Web内容 .

因此，使用'*'不仅仅是一种不好的做法 . 根本行不通:)

回复于 2024-05-10T20:10:23+08:00
5
适用于Google Chrome v5.0.375.127（我收到警报）：
```
$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
    alert(json.photos[1].photoUrl);
});
```
另外我建议您使用$.getJSON()方法，因为之前的方法不适用于IE8（至少在我的机器上）：
```
$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150', 
function(json) {
    alert(json.photos[1].photoUrl);
});
```
你可以尝试online from here .

更新：

现在您已经显示了代码，我可以看到它的问题 . 您同时拥有匿名函数和内联函数，但两者都将被称为 processImages . 's how jQuery'的JSONP支持有效 . 注意我是如何定义 callback=? 以便您可以使用匿名函数 . 你可以阅读更多about it in the documentation .

另一个说法是你不应该调用eval . 传递给您的匿名函数的参数已经被jQuery解析为JSON .
回复于 2024-05-10T20:10:23+08:00
0
在by CodeGroover above发布的解决方案中存在一个小问题，如果您更改文件，则必须重新启动服务器以实际使用更新的文件（至少在我的情况下） .

所以搜索了一下，我找到this one使用：
```
sudo npm -g install simple-http-server # to install
nserver # to use
```
然后它将在 http://localhost:8000 服务 .
回复于 2024-05-10T20:10:23+08:00
1
我在Chrome中也遇到了同样的错误（我没有测试其他浏览器） . 这是因为我在domain.com而不是www.domain.com上导航 . 有点奇怪，但我可以通过在.htaccess中添加以下行来解决问题 . 它将domain.com重定向到www.domain.com，问题解决了 . 我是一个懒惰的网络访问者，所以我几乎从不输入www，但显然在某些情况下它是必需的 .
```
RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]
```
回复于 2024-05-10T20:10:23+08:00
20
就我而言，相同的代码在Firefox上运行良好，但在谷歌浏览器上运行不正常 . 谷歌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正确匹配，然后就可以了 .
回复于 2024-05-10T20:10:23+08:00

并非所有服务器都支持jsonp . 它要求服务器在其结果中设置回调函数 . 我使用它来从返回纯json但不支持jsonp的站点获取json响应：

function AjaxFeed(){

    return $.ajax({
        url:            'http://somesite.com/somejsonfile.php',
        data:           {something: true},
        dataType:       'jsonp',

        /* Very important */
        contentType:    'application/json',
    });
}

function GetData() {
    AjaxFeed()

    /* Everything worked okay. Hooray */
    .done(function(data){
        return data;
    })

    /* Okay jQuery is stupid manually fix things */
    .fail(function(jqXHR) {

        /* Build HTML and update */
        var data = jQuery.parseJSON(jqXHR.responseText);

        return data;
    });
}

回复于 2024-05-10T20:10:23+08:00

3
对于一个简单的HTML项目：
```
cd project
python -m SimpleHTTPServer 8000
```
然后浏览您的文件 .
回复于 2024-05-10T20:10:23+08:00
8

这是same origin policy，您必须使用JSON-P接口或在同一主机上运行的代理 .

回复于 2024-05-10T20:10:23+08:00
2

伙计们，

我遇到了类似的问题 . 但是使用Fiddler，我能够解决这个问题 . 问题是在Web API端的CORS实现中配置的客户端URL不能具有尾随正斜杠 . 在通过Google Chrome提交请求并检查Fiddler的 Headers 部分的 TextView 标签后，错误消息指出如下：

*“指定的策略来源your_client_url：/'无效. It cannot end with a forward slash."

这真是古怪，因为它在Internet Explorer上没有任何问题，但是使用谷歌浏览器测试时让我头疼 .

我删除了CORS代码中的正斜杠并重新编译了Web API，现在可以通过Chrome和Internet Explorer访问API而不会出现任何问题 . 请试一试 .

谢谢，安迪

回复于 2024-05-10T20:10:23+08:00
0
据记载，据我所知，你有两个问题：
- 您没有将"jsonp"类型说明符传递给 $.get ，因此它使用的是普通的XMLHttpRequest . 但是，如果服务器对其进行了确认，则您的浏览器支持CORS（跨源资源共享）以允许跨域XMLHttpRequest . 这就是 Access-Control-Allow-Origin 标头进来的地方 .
- 我相信你提到你是从file：// URL运行的 . CORS头有两种方式表示跨域XHR是正常的 . 一个是发送 Access-Control-Allow-Origin: * （如果你通过 $.get 到达Flickr，它们一定是在做），而另一个是回显 Origin Headers 的内容 . 但是， file:// URL生成一个空 Origin ，无法通过echo-back授权 .
Darin建议使用 $.getJSON ，第一个是以迂回的方式解决的 . 如果它在URL中看到子字符串 callback=? ，则将请求类型从其默认值"json"更改为"jsonp"确实有点神奇 .

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

为了向其他人澄清，以下是简单的故障排除说明：
- 如果您尝试使用JSONP，请确保满足以下条件之一：
- 您正在使用 $.get 并将dataType设置为 jsonp .
- 您正在使用 $.getJSON 并在网址中包含 callback=? .
- 如果您正尝试通过CORS进行跨域XMLHttpRequest ...
- 确保您通过 http:// 进行测试 . 通过 file:// 运行的脚本对CORS的支持有限 .
- 确保浏览器actually supports CORS . （Opera和Internet Explorer迟到了）
回复于 2024-05-10T20:10:23+08:00

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

16 回答

相关问题