XMLHttpRequest原点null不允许file：///到file：///的Access-Control-Allow-Origin（无服务器）

我正在尝试创建一个可通过启动其索引文件来下载并在本地运行的网站。

所有文件都是本地的，没有在线资源。

当我尝试使用jQuery的AJAXSLT插件处理带有XSL模板（在子目录中）的XML文件，但收到以下错误：

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/data/home.xml. Origin null is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/assets/xsl/main.xsl. Origin null is not allowed by Access-Control-Allow-Origin.

发出请求的索引文件是file:///C:/path/to/XSL%20Website/index.html，而使用的JavaScript文件存储在file:///C:/path/to/XSL%20Website/assets/js/中。

如何解决此问题？

#1 楼

对于无法运行本地网络服务器的情况，您可以允许Chrome通过浏览器开关访问file://文件。经过一番挖掘，我找到了这个讨论，其中提到了在打开帖子时浏览器的切换。使用以下命令运行您的Chrome实例：

chrome.exe --allow-file-access-from-files

这对于开发环境是可以接受的，但别无其他。您当然不希望一直如此。这似乎仍然是一个未解决的问题（截至2011年1月）。

另请参阅：在Chrome中使用本地文件的jQuery getJSON问题

@Rich，很高兴它有所帮助！我想知道，随着Google推动基于浏览器的应用程序，对此是否会有更大的需求。我认为需求只会增长。

–库特里·克里斯滕森（Courtney Christensen）
2011年1月31日23:54

这对于Mac OS Xcweagans.net/blog/2011/1/24/…很有帮助。

– kinet
2011-2-12在6:43

谢谢，我想知道我在哪里编码错误，似乎是浏览器的问题。

– Arda
2011年6月3日上午10:54

是否有任何原因-允许文件访问文件无法解决问题。我只是试图加载像$ .getScript（“ application.js”）;这样的脚本文件；并得到问题中描述的错误。

–登佐
2012年7月25日在4:17

此方法有效，但是“执行命令之前，请确保所有Chrome窗口均已关闭且未在其他情况下运行。否则，命令行参数将无效。” chrome.exe --allow-file-access-from-文件“”（stackoverflow.com/a/4208455/1272428）

– rluks
15年11月19日在12:57

#2 楼

本质上，解决此问题的唯一方法是在本地主机上运行Web服务器并从本地服务器提供服务。

浏览器允许ajax请求访问计算机上的任何文件都是不安全的，因此，大多数浏览器似乎出于“相同原始策略”的目的而将“ file：//”请求视为没有原始请求。

启动网络服务器可能像q4312079一样简单。正在运行：

python -m SimpleHTTPServer

我希望开发一种解决方案，该解决方案不需要用户使用除Web浏览器之外的任何东西。使用Python，任何解释器或任何与系统无关的软件都不可行。

–凯文·埃雷拉（Kevin Herrera）
2010-11-28 5:40

好吧，我能想到的唯一其他解决方案是将整个内容加载到一个页面中，这样您就无需对文件系统发出任何ajax请求。

–单身
2010-11-30 13:34

谢谢@Singletoned！我正在使用您的解决方案，它非常方便！

–亨拉·爱侣湾（Hendy Irawan）
2010年12月1日于17:07

如果使用的是Python 3，则命令为python -m http.server。

– alextercete
2012年9月29日在20:53

#3 楼

该解决方案将允许您使用jQuery.getScript（）加载本地脚本。这是全局设置，但您也可以根据每个请求设置crossDomain选项。

$.ajaxPrefilter( "json script", function( options ) {
  options.crossDomain = true;
});

从本地html文件加载本地js文件就像一个魅力！谢谢，正是我需要的。

–user1577390
13年3月3日15:41

#4 楼

如何使用javascript FileReader函数打开本地文件，即：

<input type="file" name="filename" id="filename">
<script>
$("#filename").change(function (e) {
  if (e.target.files != undefined) {
    var reader = new FileReader();
    reader.onload = function (e) {
        // Get all the contents in the file
        var data = e.target.result; 
        // other stuffss................            
    };
    reader.readAsText(e.target.files.item(0));
  }
});
</script>

现在单击Choose file按钮并浏览到文件file:///C:/path/to/XSL%20Website/data/home.xml

#5 楼

这是一个Applescript，它将在打开--allow-file-access-from-files开关的情况下启动Chrome，适用于OSX / Chrome开发者：

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"    
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

您可以只使用open（1）添加标志：open -a'Google Chrome'--args --allow-file-access-from-files。

–李Jo
2011年8月10日在16:44

#6 楼

像这样启动chrome来绕过此限制：open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files。

来自Josh Lee的评论，但我需要指定Google Chrome的完整路径，以避免从我的Windows分区中打开Google Chrome（在Parallels中）。

#7 楼

我刚刚解决此问题的方法根本不是使用XMLHTTPRequest，而是将所需的数据包含在单独的javascript文件中。（就我而言，我需要一个二进制SQLite Blob才能与https://github.com/kripken/sql.js/一起使用）。

我创建了一个名为base64_data.js的文件（并使用btoa()转换了数据我需要将其插入到<div>中，以便我可以复制它。）

var base64_data = "U1FMaXRlIGZvcm1hdCAzAAQA ...<snip lots of data> AhEHwA==";

，然后像普通javascript一样将数据包括在html中：

<div id="test"></div>

<script src="base64_data.js"></script>
<script>
    data = atob(base64_data);
    var sqldb = new SQL.Database(data);
    // Database test code from the sql.js project
    var test = sqldb.exec("SELECT * FROM Genre");
    document.getElementById("test").textContent = JSON.stringify(test);
</script>

我想修改它以读取JSON甚至是XML都是微不足道的。我将其留给读者练习；）

#8 楼

您可以尝试将'Access-Control-Allow-Origin':'*'放入response.writeHead(, {[here]})中。

response.writeHead来自哪里，我怎么称呼它？在哪里？你能举更多的例子吗？请记住，这是本地文件系统而不是服务器。我的理解是只能从服务器设置值吗？

–约瑟夫·阿斯特拉罕
2014年7月16日在2:09

#9 楼

使用“ Chrome应用程序的网络服务器”。（无论您是否知道，您实际上都已经在PC上安装了它。只需在cortana中搜索它即可！）。打开它，然后单击“选择文件”，选择其中包含文件的文件夹。实际不选择文件。选择文件文件夹，然后单击“选择文件夹”按钮下的链接。

如果不带您进入该文件，则将该文件的名称添加到urs中。像这样：

   https://127.0.0.1:8887/fileName.txt

链接到Chrome的Web服务器：单击我

#10 楼

如果只需要在本地访问文件，则可以包括文件的确切路径，而不是使用

../images/img.jpg

use

C:/Users/username/directoryToImg/img.jpg

发生CORS的原因是因为您正在尝试遍历网页中的另一个目录，方法是包括不更改目录的直接路径，而是从直接位置提取。

编程黑洞网