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/。

如何解决此问题？

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

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

这对于开发环境可能是可接受的，但除此之外就很少。您当然不希望一直如此。截至2011年1月，这似乎仍是一个未解决的问题。

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

本质上，解决此问题的唯一方法是让Web服务器在localhost上运行并从那里提供服务。

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

启动Web服务器就像cd进入文件所在目录并在其中运行一样简单：

python -m SimpleHTTPServer

这是一个Applescript，它将在OSX / Chrome开发人员打开的情况下启用--allow-file-access-from-files开关启动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 &"

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

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

如何使用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

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

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

我刚刚解决此问题的方法根本不是使用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都是微不足道的。我将其留给读者作为练习；）

你可以尝试把'Access-Control-Allow-Origin':'*'在response.writeHead(, {[here]})。

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

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

   https://127.0.0.1:8887/fileName.txt

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