XmlHttpRequest错误：Access-Control-Allow-Origin不允许使用原点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

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

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

---

#1楼

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

所以搜索了一下，我发现这个要使用：

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

然后它将在http://localhost:8000 。

---

#2楼

最后， Mozilla文档明确指出 ：

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

因此，使用'*'不只是一个不好的做法。 根本行不通:)

---

#3楼

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

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

---

#4楼

我在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]

---

#5楼

并非所有服务器都支持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;
    });
}

---

#6楼

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

---

#7楼

民间，

我遇到了类似的问题。 但是使用Fiddler，我可以解决这个问题。 问题在于，在Web API端的CORS实现中配置的客户端URL不得带有尾随的正斜杠。 通过Google Chrome提交请求并检查Fiddler的Headers部分的TextView选项卡后，错误消息显示如下内容：

*“指定的策略源your_client_url：/'无效。 它不能以正斜杠结尾。”

这确实很古怪，因为它在Internet Explorer上可以正常工作，但是在使用Google Chrome浏览器进行测试时让我头疼。

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

谢谢，安迪

---

#8楼

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

您可以从这里在线尝试。

---

更新：

现在，您已经显示了代码，我可以看到它的问题。 您同时具有匿名函数和内联函数，但是都将被称为processImages 。 这就是jQuery的JSONP支持的工作方式。 注意我如何定义callback=? 这样您就可以使用匿名函数。 您可以在文档中阅读有关它的更多信息 。

另一点是您不应调用eval。 传递给匿名函数的参数已由jQuery解析为JSON。

---

#9楼

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

---

#10楼

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

1. 您没有在$.get传递“ jsonp”类型说明符，因此它使用的是普通的XMLHttpRequest。 但是，您的浏览器支持CORS（跨域资源共享），如果服务器确定，则允许跨域XMLHttpRequest。 那就是Access-Control-Allow-Origin头文件的来源。

2. 我相信您提到您是通过file：// URL运行它的。 CORS标头有两种方式来表示跨域XHR正常。 一种是发送Access-Control-Allow-Origin: * （如果您是通过$.get到达Flickr的，则必须这样做），另一种是回显Origin头的内容。 但是， file:// URL会产生一个空的Origin ，不能通过回显来授权。

第一次通过Darin的建议使用$.getJSON来$.getJSON 。 如果看到子字符串callback=?将请求类型从其默认值“ json”更改为“ jsonp”有点神奇callback=? 在网址中。

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

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

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

---

#11楼

您可能需要在调用的脚本中添加HEADER，这是我在PHP中要做的事情：

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

跨域AJAX ou服务WEB （法语）中的更多详细信息。

---

#12楼

对于PHP-在Chrome，Safari和Firefox中为我工作

https://w3c.github.io/webappsec-cors-for-developers/#avoid-returning-access-control-allow-origin-null

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

使用axios将php实时服务与file：//一起使用

---

#13楼

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

---

#14楼

我们通过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。

---

#15楼

就我而言，相同的代码在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正确匹配，然后工作正常。

---

#16楼

对于一个简单的HTML项目：

cd project
python -m SimpleHTTPServer 8000

然后浏览您的文件。

---

#17楼

我使用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传递给脚本。