“Access-Control-Allow-Origin 不允许 Origin null”从 file:// URL 运行的应用程序发出的请求出错

Question

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

Flickr 端工作正常，但当我尝试从 Panoramio 执行 $.get(url, callback) 时，我在 Chrome 控制台中看到错误：

XMLHttpRequest 无法加载 http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=测试&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...
  });
});

Answer 1

根据记录，据我所知，您遇到了两个问题：

1. 您没有将“jsonp”类型说明符传递给您的 $.get，因此它使用的是普通的 XMLHttpRequest 。但是，您的浏览器支持 CORS（跨源资源共享），如果服务器同意，则允许跨域 XMLHttpRequest。这就是 Access-Control-Allow-Origin 标头出现的地方。

2. 我相信您提到您是从 file:// URL 运行它。 CORS 标头有两种方式来表明跨域 XHR 正常。一种是发送 Access-Control-Allow-Origin: * （如果您通过 $.get 访问 Flickr，他们一定已经这样做了），而另一种是回显 Origin 标头的内容。但是，file:// URL 会生成一个 null Origin，无法通过 echo-back 进行授权。

第一个问题通过 Darin 建议使用 $.getJSON 的方式以迂回的方式解决了。如果在 URL 中看到子字符串 callback=? ，它会执行一个小魔法，将请求类型从默认的“json”更改为“jsonp”。

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

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

1. 如果您尝试使用 JSONP，请确保存在以下情况之一：
   • 您正在使用 $.get 并设置 dataType< /code>到 jsonp。
   • 您使用的是 $.getJSON 并在 URL 中包含 callback=?。

2. 如果您尝试通过 CORS 执行跨域 XMLHttpRequest...
   1. 确保您通过 http:// 进行测试。通过 file:// 运行的脚本对 CORS 的支持有限。
   2. 确保浏览器确实支持 CORS。 （Opera 和 Internet Explorer 迟到了）

Answer 2

您可能需要在调用的脚本中添加一个标头，这是我在 PHP 中必须做的事情：

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

Answer 3

对于简单的 HTML 项目：

Python 2

cd project
python -m SimpleHTTPServer 8000

Python 3

cd project
python -m http.server 8000

然后浏览您的文件。

Answer 4

适用于 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。

Answer 5

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

Answer 6

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

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

Answer 7

这是同源策略，您必须使用 JSON-P 接口或在同一个主机。

Answer 8

我们通过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中设置Access-Control-Allow-Origin "*"，可以输入准确的网址。

Answer 9

就我而言，相同的代码在 Firefox 上运行良好，但在 Google Chrome 上则不然。 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 正确匹配，然后就可以正常工作了。

Answer 10

最后一点，Mozilla 文档明确指出< /a> 那个

如果标头使用通配符，上面的示例将失败：
Access-Control-Allow-Origin: *. 由于 Access-Control-Allow-Origin 明确提及 http:// /foo.example,
凭证识别内容返回到调用网络
内容。

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

Answer 11

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

Answer 12

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

Answer 13

对于 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 live服务与文件://

Answer 14

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

Answer 15

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

Answer 16

各位，

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

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

这确实很奇怪，因为它在 Internet Explorer 上运行没有任何问题，但在使用 Google Chrome 进行测试时却让我头疼。

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

谢谢，
安迪

Answer 17

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

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

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

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