对于运行于// URL文件的应用程序的请求，出现" Origin null is not allowed by Access-Control-Allow-Origin "错误

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

Flickr方面工作正常，但当我尝试$.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不允许原点为空。

如果我直接从浏览器中查询该URL，它可以正常工作。这是怎么回事，我能回避吗?我是否错误地编写了我的查询，或者这是Panoramio所做的阻碍我试图做的事情?

谷歌没有在错误消息上找到任何有用的匹配。

编辑

下面是一些显示问题的示例代码:

$().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...
});
});
819267 次浏览
小开

适用于我的谷歌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。

小开

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

小开
最佳答案

郑重声明，据我所知，你有两个问题

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

  2. 我相信你提到过你从一个文件:// URL运行它。CORS报头有两种方式表明跨域XHR是可以的。一个是发送Access-Control-Allow-Origin: *(如果你通过$.get到达Flickr，他们一定是这样做的)，而另一个是回显Origin头的内容。然而，file:// url会生成一个空的Origin，不能通过回显进行授权。

第一个问题通过Darin建议使用$.getJSON来迂回解决。如果它在URL中看到子字符串callback=?，它会做一些神奇的事情，将请求类型从默认的“json”更改为“jsonp”。

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

为了让其他人更清楚，这里有一些简单的故障排除说明:

    如果您尝试使用JSONP，请确保以下情况之一:
    • 您正在使用$.get并将dataType设置为jsonp。
    • 您正在使用$.getJSON并在URL中包含callback=?。
      • 李< / ul > < / > 如果你试图通过CORS做一个跨域的XMLHttpRequest…
      1. 确保你是通过http://进行测试。通过file://运行的脚本对CORS的支持有限。
      2. 确保浏览器实际上支持CORS。(Opera和ie浏览器姗姗来迟)
        3. 李< / ol > < / >
小开

你可能需要在你调用的脚本中添加一个HEADER，这是我在PHP中必须做的:

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

更多详情见跨域AJAX ou services WEB(法语)。

小开

只要请求的服务器支持JSON数据格式，就可以使用JSONP (JSON Padding)接口。它允许您在没有代理服务器或花哨的报头的情况下进行外部域请求。

小开

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

小开

在我的例子中，同样的代码在Firefox上运行良好，但在谷歌Chrome上就不行了。谷歌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正确匹配，然后它工作得很好。

小开

对于一个简单的HTML项目:

cd project
python -m SimpleHTTPServer 8000

然后浏览您的文件。

小开

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

小开

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

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

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

然后它会在http://localhost:8000上。

小开

最后注意Mozilla文档明确指出

如果头是通配符，上面的例子将失败: 由于Access-Control-Allow-Origin明确提到了http://foo.example， 凭证识别内容返回给调用web 内容。< / p >

因此，使用'*'不仅仅是一个坏习惯。根本不管用:)

小开

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

< p >在MAC: # EYZ0 < / p >
小开

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

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

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

小开

伙计们,

我也遇到过类似的问题。但是使用Fiddler，我能够解决这个问题。问题是在Web API端CORS实现中配置的客户端URL不能有后面的正斜杠。在通过谷歌Chrome浏览器提交您的请求后，检查TextView标签的头部分的Fiddler，错误消息如下所示:

*"指定的策略来源your_client_url:/'无效。# EYZ0

这真的很奇怪，因为它在ie浏览器上没有任何问题，但在使用谷歌Chrome浏览器测试时让我头疼。

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

< p >谢谢, 安迪< / p >
小开

对于PHP -这个工作为我在Chrome, safari和firefox

< a href = " https://w3c.github。Io / webappseco -cors-for developers/#avoid- returns -access-control-allow-origin-null" rel="nofollow noreferrer">https://w3c.github.io/webappsec-cors-for-developers/#avoid-returning-access-control-allow-origin-null

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

使用axios使用file://调用PHP live服务


提交答案