jQuery XMLHttpRequest Origin null is not allowed for file:/// to file:/// (Serverless)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4208530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file:/// to file:/// (Serverless)
提问by Kevin Herrera
I'm trying to create a website that can be downloaded and run locally by launching its index file.
我正在尝试创建一个可以通过启动其索引文件在本地下载和运行的网站。
All the files are local, no resources are used online.
所有文件都是本地的，没有在线使用资源。
When I try to use the AJAXSLT plugin for jQuery to process an XML file with an XSL template (in sub directories), I receive the following errors:
当我尝试使用 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/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.
XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/assets/xsl/main.xsl. Origin null is not allowed by Access-Control-Allow-Origin.
The index file making the request is file:///C:/path/to/XSL%20Website/index.htmlwhile the JavaScript files used are stored in file:///C:/path/to/XSL%20Website/assets/js/.
发出请求的索引文件是file:///C:/path/to/XSL%20Website/index.html使用的 JavaScript 文件存储在file:///C:/path/to/XSL%20Website/assets/js/.
How can I do to fix this issue?
我该如何解决这个问题？
采纳答案by Courtney Christensen
For instances where running a local webserver is not an option, you can allow Chrome access to file://files via a browser switch. After some digging, I found this discussion, which mentions a browser switch in opening post. Run your Chrome instance with:
对于无法运行本地网络服务器的情况，您可以file://通过浏览器开关允许 Chrome 访问文件。经过一番挖掘，我发现了这个讨论，其中在开头的帖子中提到了浏览器切换。使用以下命令运行您的 Chrome 实例：
chrome.exe --allow-file-access-from-files
This may be acceptable for development environments, but little else.You certainly don't want this on all the time. This still appears to be an open issue (as of Jan 2011).
这对于开发环境来说可能是可以接受的，但除此之外别无他法。你当然不想一直这样。这似乎仍然是一个悬而未决的问题（截至 2011 年 1 月）。
See also: Problems with jQuery getJSON using local files in Chrome
回答by Singletoned
Essentially the only way to deal with this is to have a webserver running on localhost and to serve them from there.
基本上处理这个问题的唯一方法是在本地主机上运行一个网络服务器并从那里为它们提供服务。
It is insecure for a browser to allow an ajax request to access any file on your computer, therefore most browsers seem to treat "file://" requests as having no origin for the purpose of "Same Origin Policy"
浏览器允许 ajax 请求访问您计算机上的任何文件是不安全的，因此出于“同源策略”的目的，大多数浏览器似乎将“file://”请求视为没有来源
Starting a webserver can be as trivial as cding into the directory the files are in and running:
启动一个网络服务器就像cd进入文件所在和运行的目录一样简单：
python -m SimpleHTTPServer
回答by ericsoco
Here is an applescript that will launch Chrome with the --allow-file-access-from-files switch turned on, for OSX/Chrome devs out there:
这是一个 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 &"
回答by Renaud
This solution will allow you to load a local script using jQuery.getScript(). This is a global setting but you can also set the crossDomain option on a per-request basis.
此解决方案将允许您使用 jQuery.getScript() 加载本地脚本。这是一个全局设置，但您也可以在每个请求的基础上设置 crossDomain 选项。
$.ajaxPrefilter( "json script", function( options ) {
options.crossDomain = true;
});
回答by suhailvs
What about using the javascript FileReaderfunction to open the local file, ie:
使用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>
Now Click Choose filebutton and browse to the file file:///C:/path/to/XSL%20Website/data/home.xml
现在单击Choose file按钮并浏览到文件file:///C:/path/to/XSL%20Website/data/home.xml
回答by Stunner
Launch chrome like so to bypass this restriction: open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.
启动Chrome浏览器，像这样来绕过这一限制：open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files。
Derived from Josh Lee's commentbut I needed to specify the full path to Google Chrome so as to avoid having Google Chrome opening from my Windows partition (in Parallels).
源自Josh Lee 的评论，但我需要指定 Google Chrome 的完整路径，以避免从我的 Windows 分区（在 Parallels 中）打开 Google Chrome。
回答by Anthony Briggs
The way I just worked around this is not to use XMLHTTPRequest at all, but include the data needed in a separate javascript file instead. (In my case I needed a binary SQLite blob to use with https://github.com/kripken/sql.js/)
我刚刚解决这个问题的方法根本不是使用 XMLHTTPRequest，而是将所需的数据包含在单独的 javascript 文件中。（在我的情况下，我需要一个二进制 SQLite blob 与https://github.com/kripken/sql.js/一起使用）
I created a file called base64_data.js(and used btoa()to convert the data that I needed and insert it into a <div>so I could copy it).
我创建了一个名为base64_data.js（并用于btoa()转换我需要的数据并将其插入到 a 中<div>以便我可以复制它）的文件。
var base64_data = "U1FMaXRlIGZvcm1hdCAzAAQA ...<snip lots of data> AhEHwA==";
and then included the data in the html like normal javascript:
然后像普通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>
I imagine it would be trivial to modify this to read JSON, maybe even XML; I'll leave that as an exercise for the reader ;)
我想修改它以读取 JSON，甚至是 XML 是微不足道的；我将把它留给读者作为练习；)
回答by Shikon
You can try putting 'Access-Control-Allow-Origin':'*'in response.writeHead(, {[here]}).
你可以尝试把'Access-Control-Allow-Origin':'*'在response.writeHead(, {[here]})。
回答by person the human
use the 'web server for chrome app'. (you actually have it on your pc, wether you know or not. just search it in cortana!). open it and click 'choose file' choose the folder with your file in it. do not actually select your file. select your files folderthen click on the link(s) under the 'choose folder' button.
使用“Chrome 应用程序的网络服务器”。（你实际上在你的电脑上有它，不管你知道与否。只需在 cortana 中搜索它！）。打开它并单击“选择文件”选择包含您的文件的文件夹。不要实际选择您的文件。选择您的文件夹，然后单击“选择文件夹”按钮下的链接。
if it doesnt take you to the file, then add the name of the file to the urs. like this:
如果它没有带您到该文件，则将文件名添加到 urs.h 文件中。像这样：
https://127.0.0.1:8887/fileName.txt
link to web server for chrome: click me
链接到 chrome 的网络服务器： 点击我
