繞過本地文件系統上的Chrome Access-control-allow-origin？

Question

我已經在SO上閱讀了其他相同的原始策略主題，但我還沒有看到任何與本地文件系統相關的解決方案。

我有一個網絡應用程序（在一個松散的意義上）必須在本地服務。 我試圖在用戶加載頁面后加載大量數據，具體取決於他們在網頁上做了什么。 在Firefox 3.5和IE8中，我可以使用jQuery的AJAX（）和GetScript（）方法來執行此操作，但在Chrome中由於同源策略而失敗。

XMLHttpRequest無法加載file://test/testdir/test.js 。 by Access-Control-Allow-Origin不允許by Access-Control-Allow-Origin null 。

這種情況發生在我做一些簡單的事情時

$.getScript("test.js");

這在IE和Firefox中運行良好。

在閱讀了大量有關此內容之后，我決定嘗試直接寫入文檔的頭部。 在Chrome的控制台中，我鍵入了以下內容：

var head = document.getElementsByTagName("head")[0];  
var script =document.createElement('script');   
script.id = 'uploadScript';  
script.type = 'text/javascript';  
script.src = "upload.js";   
head.appendChild(script);

這在粘貼到<script...test.js</script>時工作正常 - 將<script...test.js</script>元素添加到頭部，評估並將內容加載到DOM中。

我認為這是成功的，直到我將此代碼放入函數調用。 從函數調用時，相同的確切代碼會將元素添加到但不會評估JavaScript文件。 我無法弄清楚為什么。 如果我使用Chrome的控制台停止執行它正在添加元素的方法並運行上面的代碼，它就不會對它進行評估。 但是，如果我取消暫停執行並運行完全相同的代碼（在控制台窗口中粘貼它），它就可以工作。 我無法解釋這一點。 以前有人處理過這個嗎？

我已經閱讀了以下SO帖子，但他們沒有描述我的問題：

如何規避同源政策
XMLHttpRequest Origin null不允許Access-Control-Allow-Origin for file：/// to file：///（Serverless）
跨站點XMLHttpRequest

同樣，我最后的辦法是在網頁加載時加載所有數據 - 這可能導致加載網頁最多延遲10秒，這對90％的應用用戶來說是不必要的。

感謝您的任何建議/選擇！

Answer 1

我想我已經明白了。

我真正需要做的就是在我的<script>標簽中添加一個回調。 最終代碼：

我有一個名為next的元素...所以，在$("#next").click()函數我有以下代碼。 只有在點擊“下一步”時才會執行此操作。

//remove old dynamically written script tag-    
       var old = document.getElementById('uploadScript');  
   if (old != null) {  
     old.parentNode.removeChild(old);  
     delete old;  
   } 

   var head = document.getElementsByTagName("head")[0];  
   script = document.createElement('script');  
   script.id = 'uploadScript';  
   script.type = 'text/javascript';  
   script.src = 'test/' + scope_dir + '/js/list.js';  
   script.onload = refresh_page;    
   head.appendChild(script);  


function refresh_page(){  
   //perform action with data loaded from the .js file.  
}  

這似乎有效，並允許Chrome在本地文件系統上動態加載.js文件，同時避免在嘗試使用jQuery函數時遇到的access-control-allow-origin策略。

Answer 2

好吧，做了很多擺弄，浪費了很多時間。 但我明白了。 我的上一個答案中的解決方案適用於Chrome和Mozilla。 但它不適用於受祝福的IE，因為IE不會觸發onload事件：它認為它已經處理了這個文件中的所有onloads，你不能讓它做另一個。 但是，IE非常樂意使用JQuery getScript函數加載文件（由於ccess-control-allow-origin策略，Chrome不允許這樣做） - 您需要使用JQuery庫才能使用它。 所以這就是我最終的結果：

function getMyText(){
    var url='mylocalfile.js';
    if (jQuery.support.scriptEval) { 
        var old = document.getElementById('uploadScript');  
        if (old != null) {  
             old.parentNode.removeChild(old);  
             delete old;  
            } 
        var head = document.getElementsByTagName("head")[0]; 
        var script = document.createElement('script');
        script.id = 'uploadScript';
        script.type = 'text/javascript';
        script.onload = refresh_page; 
        script.src = url; 
        head.appendChild(script);  
    } else {
       $.getScript(url,function(){
            refresh_page();
      });
     }
}

function refresh_page() {
    alert(mytext);
}

在所有這些中，mylocaltext.js將我的所有html定義為變量mytext的內容。 丑陋，但它的工作原理。 對於在DOM發生更改時觸發onload事件的智能瀏覽器，jQuery.support.scriptEval為true。 IE沒有，所以將它發送到.getScript; Chrome和其他人這樣做，因此以另一種方式發送它們。 無論如何，這適用於本地文件。

Answer 3

有趣，但我如何使用相同的技術加載整個HTML文件？ 你的類似問題 - 我有數百個HTML文件，我想要包含在一個網頁中，具體取決於用戶想要看到的內容。 似乎我可以使用這種技術加載整個HTML頁面，如：

script.id = 'uploadScript';
script.type = 'text/html';
script.src = url; 
script.onload = refresh_page; 
head.appendChild(script);  

即，告訴它在HTML中加載。 我可以從控制台看到它正在將它加載到頁面中，我收到一條消息“資源解釋為腳本但是使用MIME類型text / html傳輸”。 但我無法弄清楚是否有任何方法來獲取加載並保存在腳本中的HTML