Access-Control-Allow-Origin不允许使用原点null


183

我制作了一个小的xslt文件,以使用以下代码创建一个名为weather.xsl的html输出:

<!-- DWXMLSource="http://weather.yahooapis.com/forecastrss?w=38325&u=c" -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
exclude-result-prefixes="yweather"
xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
    <img src="{/*/*/item/yweather:condition/@text}.jpg"/>
</xsl:template>
</xsl:stylesheet>

我想将html输出加载到html文件中的div中,我正在尝试使用jQuery进行如下操作:

<div id="result">
<script type="text/javascript">
$('#result').load('weather.xsl');
</script>
</div>

但是我遇到以下错误:Access-Control-Allow-Origin不允许使用Origin null。

我已经读过有关向xslt添加标头的信息,但是我不确定如何做到这一点,因此将不胜感激,并且如果无法以这种方式完成html输出中的加载,则建议如何进行其他操作这样做会很棒。


那是你的实际 load电话吗?根本没有路径吗?
TJ Crowder

Answers:


227

Origin null是本地文件系统,因此建议您正在加载load通过file:///URL 进行呼叫的HTML页面(例如,只需在本地文件浏览器或类似文件中双击它)。不同的浏览器采用不同的方法将“ 相同来源策略”应用于本地文件。

我的猜测是您正在使用Chrome浏览器。Chrome的SOP应用于本地文件的规则非常严格,甚至不允许从与文档相同的目录中加载文件。Opera也是如此。某些其他浏览器(例如Firefox)允许对本地文件的访问受限。但是基本上,将ajax与本地资源一起使用将无法跨浏览器工作。

如果您只是在本地测试要真正部署到Web的内容,而不是使用本地文件,请安装简单的Web服务器并通过http://URL进行测试。这样可以为您提供更加准确的安全信息。


1
上传后,我不再获得Origin为null的信息,但仍然收到“ Access-Control-Allow-Origin不允许的信息”。
dudledok 2011年

3
如果您正在加载的资源如($('#result').load('weather.xsl');)所示,则不应发生这种情况,因为请求显然来自同一来源。如果您尝试从其他地方加载(例如$('#result').load('http://somewhere.else/weather.xsl');),那么您将以另一种方式再次进入SOP。Ajax请求仅限于同一来源(请参阅答案中的链接),或者如果您使用的是启用CORS的浏览器并且服务器支持COR,则服务器可以选择是否允许跨域请求。
TJ Crowder

我更改了加载网址。将其更改回问题中的一个使其加载正常。感谢您的帮助
dudledok 2011年

2
设置简单的Web服务器的最简单,最快的方法是什么?IIS是这里最简单的方法吗?
Ciaran Gallagher

13
@CiaranG我python -m SimpleHTTPServer从命令行运行,然后转到localhost:8000,为我工作。Python已预装在Mac OS X中;如果使用其他操作系统,则可能需要安装。
戴夫·利普曼

216

Chrome和Safari在将ajax与本地资源一起使用时受到限制。这就是为什么它会抛出类似

Access-Control-Allow-Origin不允许使用Origin null。

解决方案:使用Firefox或将数据上传到临时服务器。如果您仍然想使用Chrome,请使用以下选项启动它;

--allow-file-access-from-files

有关如何将以上参数添加到Chrome的更多信息:右键单击任务栏上的Chrome图标,右键单击弹出窗口上的Google Chrome,然后单击属性,然后在“快捷方式”选项卡下的“目标”文本框中添加以上参数。它将如下所示;

C:\Users\XXX_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

希望这会有所帮助!


19
在Mac OS X中,您可以通过以下方法启动Chrome:打开终端,然后输入: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files & 注意,最后一个&只是您可以继续使用终端而已,并非必需。 注意:如果关闭终端,它将关闭Chrome窗口。
布鲁诺·贝纳迪诺

3
做了所有这些,然后关闭并打开。仍然不行(XP上为Chrome 27.0.1453.116 m)
mplungjan

我无法在Windows 8下添加此参数...,任何知道如何执行此操作的人吗?...
Morty,2014年

正在从Web服务器上运行。有没有搞错?我如何确定它在哪里加载本地文件?
安迪

当我尝试将--allow-file-access-from-files添加到目标路径时,收到“ .... invalid”消息,htis解决方案仍然有效吗?
Alex

48

只是想补充一下,“运行网络服务器”的答案似乎很艰巨,但是如果您的系统上安装了python(默认情况下至少在MacOS和任何Linux发行版上都安装了python),则非常简单:

python -m http.server  # with python3

要么

python -m SimpleHTTPServer  # with python2

因此,如果您的html文件myfile.html位于文件夹中,请说mydir,您要做的就是:

cd /path/to/mydir
python -m http.server  # or the python2 alternative above

然后将浏览器指向:

http://localhost:8000/myfile.html

您完成了!在所有浏览器均可使用,而无需禁用Web安全性,允许本地文件甚至使用命令行选项重新启动浏览器。


2
Windows上等效的python 3是:python -m http.server [<portNo>]
Aragorn

Python的3:python3 -m http.server
若奥·努涅斯

Linux上的Python 2,选择8080端口(或您想要的任何其他端口):python -m SimpleHTTPServer 8080
Rodrigo

2

我想根据这个SO来源谦虚地添加它:https : //stackoverflow.com/a/14671362/1743693,现在仅通过使用以下jQuery指令就可以部分解决这种麻烦:

<script> 
    $.support.cors = true;
</script>

我在IE10.0.9200上尝试过,它立即起作用(使用jquery-1.9.0.js)。

在Chrome 28.0.1500.95上,此说明不起作用(这种情况经常发生,因为大卫在上面链接的评论中抱怨道)

使用--allow-file-access-from-files运行chrome对我不起作用(如Maistora的上述主张)


2

增加一点使用Gokhan的解决方案的用途:

--allow-file-access-from-files

现在,您只需要在目标文本中的上方文本后面加上一个空格即可。添加上述属性后,请确保关闭所有Chrome浏览器实例。现在,通过添加此属性的图标重新启动chrome。它应该为所有人工作。


该参数已经由Ghokan Tank提出,并且找出如何始终使浏览器始终以此参数开头不是问题的一部分。此外,您不能假设每个人都使用Microsoft Windows。
jnns

0

我一直在寻找从本地html文件向服务器发出XHR请求的解决方案,并找到了使用Chrome和PHP的解决方案。(没有Jquery)

Javascripts:

var x = new XMLHttpRequest(); 
if(x) x.onreadystatechange=function(){ 
    if (x.readyState === 4 && x.status===200){
        console.log(x.responseText); //Success
    }else{ 
        console.log(x); //Failed
    }
};
x.open(GET, 'http://example.com/', true);
x.withCredentials = true;
x.send();

我的Chrome的请求标头 Origin: null

我的PHP响应标头(请注意,'null'是一个字符串)。HTTP_REFERER允许从远程服务器到另一个服务器的跨域。

header('Access-Control-Allow-Origin: '.(trim($_SERVER['HTTP_REFERER'],'/')?:'null'),true);
header('Access-Control-Allow-Credentials:true',true);

我能够成功连接到服务器。您可以忽略Credentials标头,但这在AuthType Basic启用Apache的情况下对我有效

我测试了与FF和Opera的兼容性,它在许多情况下都可以工作,例如:

从VM LAN IP(192.168.0.x)回到VM的WAN(公共)IP:port
从VM LAN IP回到远程服务器域名。
从本地.HTML文件到VM LAN IP和/或VM WAN IP:端口,
从本地.HTML文件到远程服务器域名。
等等。


0

您可以file:/使用source标记加载本地Javascript文件(在源页面下方的树中):

<script src="my_data.js"></script>

如果将输入编码为Javascript,例如这种情况:

mydata.js

$xsl_text = "<xsl:stylesheet version="1.0" + ....

(对于json来说更容易),那么您就可以在Java全局变量中使用自己的“数据”,以按照需要使用。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.