Question

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

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

当我尝试使用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/中。

如何解决此问题？

Answer 1

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

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

这对于开发环境来说可能是可以接受的，但很少有。你当然不希望这样。这仍然是一个悬而未决的问题（截至2011年1月）。

另请参阅：Problems with jQuery getJSON using local files in Chrome

Answer 2

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

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

启动网络服务器可以像cd一样轻松进入文件所在的目录并运行：

python -m SimpleHTTPServer

Answer 3

这是一个AppleScript，它将启动Chrome，并启用--allow-file-access-from-files开关，以便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 &"

Answer 4

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

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

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

<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也是微不足道的;我将此作为练习留给读者;）

Answer 9

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

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

   https://127.0.0.1:8887/fileName.txt

链接到Chrome的Web服务器：click me

Answer 10

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

../images/img.jpg

使用

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

之所以会发生CORS，是因为您试图遍历网页中的另一个目录，包括不更改目录的直接路径，而是从直接位置拉出。

XMLHttpRequest Origin null不允许Access-Control-Allow-Origin for file：/// to file：///（Serverless）

10 个答案: