ChatGPT解决这个技术问题 Extra ChatGPT

XMLHttpRequest Origin null 不允许使用 Access-Control-Allow-Origin for file:/// 到 file:///(无服务器)

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

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

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

我该如何解决这个问题?


C
Community

对于无法运行本地网络服务器的情况,您可以允许 Chrome 通过浏览器开关访问 file:// 文件。经过一番挖掘,我找到了 this discussion,它在开头的帖子中提到了浏览器开关。运行您的 Chrome 实例:

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

这对于开发环境来说可能是可以接受的,但除此之外几乎没有。你当然不想一直这样。这似乎仍然是一个悬而未决的问题(截至 2011 年 1 月)。

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


@Rich,很高兴它有帮助!我想知道随着谷歌对基于浏览器的应用程序的推动,是否会有更大的需求。我认为需求只会增长。
这对 Mac OS X cweagans.net/blog/2011/1/24/… 很有帮助
谢谢,我想知道我在哪里编码错误,似乎浏览器是问题所在。
是否有任何理由 --allow-file-access-from-files 无法解决问题。我只是想加载一个像这样的脚本文件 $.getScript("application.js");并得到问题中描述的错误。
这可行,但是“在执行命令之前,请确保您的所有 Chrome 窗口都已关闭并且没有以其他方式运行。否则,命令行参数将无效。”chrome.exe --allow-file-access-from-文件"" (stackoverflow.com/a/4208455/1272428)
S
Singletoned

本质上,解决这个问题的唯一方法是在 localhost 上运行一个网络服务器并从那里为它们提供服务。

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

启动网络服务器就像cd进入文件所在的目录并运行一样简单:

python -m http.server

[编辑感谢@alextercete,指出它已在 Python3 中更新]


我希望开发一种解决方案,它不需要用户使用除了他们的网络浏览器以外的任何东西。使用 Python、任何解释器或任何非系统无关软件都是不可行的。
那么我能想到的唯一其他解决方案是将整个内容加载到一个页面中,这样您就不需要向文件系统发出任何 ajax 请求。
谢谢@Singletoned!我正在使用您的解决方案,它非常方便!
如果您使用的是 Python 3,则命令为 python -m http.server
R
Renaud

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

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

从本地 html 文件加载本地 js 文件就像一个魅力!谢谢,正是我需要的。
s
suhailvs

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


e
ericsoco

这是一个苹果脚本,它将在打开 --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
C
Community

像这样启动 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。


A
Anthony Briggs

我刚刚解决这个问题的方法根本不使用 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 将是微不足道的;我将把它作为练习留给读者;)


n
nstCactus

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


response.writeHead 来自哪里,我该如何称呼它以及在哪里?你能举出更多的例子吗?请记住,这是本地文件系统而不是服务器。我的理解是只能从服务器设置值?
p
person the human

使用“Chrome 应用程序的网络服务器”。 (不管你知道与否,你实际上已经在你的电脑上。只需在 cortana 中搜索它!)。打开它并单击“选择文件”选择包含您的文件的文件夹。不要实际选择您的文件。选择您的文件夹,然后单击“选择文件夹”按钮下的链接。

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

   https://127.0.0.1:8887/fileName.txt

链接到 chrome 的网络服务器:click me


L
Levi Johnson

如果您只需要在本地访问文件,那么您可以包含文件的确切路径,而不是使用

../images/img.jpg

利用

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

CORS 发生的原因是因为您试图遍历网页中的另一个目录,通过包含您不更改目录的直接路径,您是从直接位置提取的。