2010-11-17 60 views
199

我试图创建一个网站,可以通过启动其索引来下载和运行本地文件。XMLHttpRequest原始空值不允许访问控制允许源文件:///到文件:///(无服务器)

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

当我尝试使用AJAXSLT的jQuery插件来处理与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/中。

我该如何解决这个问题?

回答

173

对于在运行的本地Web服务器实例是不是一种选择,你可以允许通过浏览器访问file://文件浏览器开关。经过一番挖掘,我发现this discussion,其中提到了打开帖子中的浏览器切换。与运行在Chrome实例:

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

这可能是开发环境可以接受的,但没有别的。你当然不会一直想要这个。这似乎仍然是一个悬而未决的问题(截至2011年1月)。

参见:Problems with jQuery getJSON using local files in Chrome

+4

谢谢,这只是简化了我的发展。 – Rich 2011-01-30 23:15:00

+1

@很高兴帮助!我想知道Google推动基于浏览器的应用是否会有更大的需求。我认为需求只会增长。 – 2011-01-31 23:54:44

+4

这是有用的Mac OS X http://cweagans.net/blog/2011/1/24/command-line-flags-google-chrome-mac-osx – kinet 2011-02-12 06:43:07

85

基本上,解决这个问题的唯一方法是在本地主机上运行一个web服务器并从那里为它们提供服务。

它是不安全的浏览器允许一个Ajax请求访问您的计算机上的任何文件,因此大多数浏览器似乎对待“文件://”的要求为具有的“Same Origin Policy

目的没有由来

启动web服务器可以像微不足道cd荷兰国际集团到该目录中的文件并运行:

python -m SimpleHTTPServer 
+1

我希望开发一个解决方案,不需要用户使用比他们的Web浏览器更多的东西。使用Python,任何解释器或任何非系统不可知的软件都是不可行的。 – 2010-11-28 05:40:13

+5

那么我能想到的唯一的其他解决方案就是将整个东西加载到一个页面中,这样就不需要对文件系统发出任何Ajax请求。 – Singletoned 2010-11-30 13:34:42

+2

谢谢@Singletoned!我正在使用您的解决方案,它非常方便! – 2010-12-01 17:07:06

4

这里是将推出Chrome浏览器与--allow-文件访问从-文件开关开启,为OSX/Chrome的开发者那里一个AppleScript:

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 &" 
+14

您可以使用[打开(1)](http://developer.apple.com/library/mac/documentation/ Darwin/Reference/ManPages/man1/open.1.html)添加标志:'open -a'Google Chrome'--args --allow-file-access-from-files'。 – 2011-08-10 16:44:08

1

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

+6

response.writeHead从哪里来,我怎么称呼它,在哪里?你能举出更多的例子吗?请记住,这是一个本地文件系统而不是服务器。我的理解是,价值只能从服务器设置? – 2014-07-16 02:09:44

4

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

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

就像从本地html文件加载本地js文件一样工作!谢谢,正是我需要的。 – user1577390 2013-11-03 15:41:07

4

怎么样使用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

+0

这对我有效。非常好! – 2015-01-02 04:30:27

3

启动Chrome浏览器,像这样绕过这个限制:open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files

派生自Josh Lee's comment,但我需要指定Google Chrome的完整路径,以避免Google Chrome从我的Windows分区(在Parallels中)打开。

1

我刚才的解决方法是不使用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;我将把它作为读者的练习;)

相关问题