2010-11-17 66 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;我將把它作爲讀者的練習;)

相關問題