关于jquery：XMLHttpRequest Origin不允许使用Access-Control-Allow-Origin for file：/// to file：///(Serverless)


XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file:/// to file:/// (Serverless)

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

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

当我尝试使用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实例：

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

对于开发环境而言，这可能是可以接受的，你当然不希望这一直存在。这仍然是一个悬而未决的问题(截至2011年1月)。

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

相关讨论

基本上解决这个问题的唯一方法是让一个webserver在localhost上运行并从那里为它们提供服务。

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

启动Web服务器可以像cd进入文件所在和运行的目录一样简单：

1
python -m SimpleHTTPServer
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<input type="file" name="filename" id="filename">

$("#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));
  }
});

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

此解决方案允许您使用jQuery.getScript()加载本地脚本。这是一个全局设置，但您也可以基于每个请求设置crossDomain选项。

1
2
3
$.ajaxPrefilter("json script", function( options ) {
  options.crossDomain = true;
});
相关讨论

这是一个AppleScript，它将启动Chrome，并打开--allow-file-access-from-files开关，因为OSX / Chrome开发了：

1
2
3
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 &"
相关讨论

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

源自Josh Lee的评论，但我需要指定谷歌浏览器的完整路径，以避免从我的Windows分区(在Parallels中)打开谷歌浏览器。

我刚刚解决这个问题的方法是根本不使用XMLHTTPRequest，而是在单独的javascript文件中包含所需的数据。 (在我的情况下，我需要一个二进制SQLite blob与https://github.com/kripken/sql.js/一起使用)

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

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

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

1
2
3
4
5
6
7
<script src="base64_data.js">

    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);

我想，将其修改为读取JSON，甚至是XML，都是微不足道的;我将把它作为读者的练习;)

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

相关讨论

使用'网络服务器为chrome app'。 (你真的把它放在你的电脑上，你知道与否。只需在cortana中搜索它！)。打开它并单击"选择文件"，选择包含文件的文件夹。实际上并没有选择你的文件。选择您的文件夹，然后单击"选择文件夹"按钮下的链接。

如果它没有带你到文件，然后将文件的名称添加到urs。像这样：

1
   https://127.0.0.1:8887/fileName.txt

链接到Chrome服务器：点击我