绕过本地文件系统上的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