绕过本地文件系统上的Chrome访问控制允许来源？ [英] Circumventing Chrome Access-control-allow-origin on the local file system?

问题描述

我在这里阅读了其他同样的来源策略主题，但我还没有看到任何有关本地文件系统的解决方案。

我有一个网络应用程序（以一种宽松的意义来说）必须是本地服务。我试图在用户加载页面后加载大量数据，具体取决于他们在网页上做了什么。在Firefox 3.5和IE8中，我可以使用jQuery的AJAX（）和GetScript（）方法执行此操作，但在Chrome中，由于相同原点策略的原因，此操作失败。

XMLHttpRequest 无法加载 file：// test / TESTDIR / test.js 。来源 null 不被允许通过Access-Control-Allow-Origin 。

blockquote>

当我做一些简单的事情时会发生这种情况，比如

  $。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）; 
  

这可以在控制台中粘贴 - <脚本.. .test.js< / script> 元素被添加到头部，进行评估，并将内容加载到DOM中。

我认为这是直到我将这段代码放入函数调用中。从函数调用时，相同的确切代码会将元素添加到该元素，但不会评估JavaScript文件。我无法弄清楚为什么。如果我使用Chrome的控制台在将元素添加到并运行上述代码的方法中停止执行，则不会对其进行评估。但是，如果我取消暂停执行并运行完全相同的代码（将其粘贴到控制台窗口中），它就可以工作。我无法解释这一点。有人曾经处理过这个吗？

我已阅读了以下SO帖子，但他们没有描述我拥有的问题：

避开同源政策的方法

XMLHttpRequest原始空值不允许Access-Control-Allow-Origin为file：///为file：///（无服务器）

跨站点XMLHttpRequest

同样，我的最后一招是将所有数据加载到网页的负载 - 这可能会导致加载网页的时间延迟10秒，对于90％的应用程序用户来说是不必要的。

感谢您提供任何建议/备选方案！ !!

解决方案

我 think 我已经想通了。

我真正需要做的是在我的< script>中添加一个回调; 标签。最终代码：

我有一个名为next的元素...因此，在 $（＃next）。click（） code>函数我有以下代码。只有点击下一步才能执行。



  //删除旧的动态脚本标记 -  
 var old = document.getElementById（'uploadScript'）; 
 if（old！= null）{
 old.parentNode.removeChild（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）; 
 
 
函数refresh_page（）{
 //使用从.js文件加载的数据执行操作。 
} 
  

这似乎有效，并允许Chrome动态加载.js文件本地文件系统，同时绕过我在尝试使用jQuery函数时遇到的访问控制允许源策略。

I've read the other same origin policy topics here on SO, but I haven't seen any solutions related to the local file system.

I have a web app (In a loose sense of the word) that must be local served. I am trying to load a large amount of data in after the user has loaded the page, depending on what they are doing on the webpage. In Firefox 3.5 and IE8 I am able to use jQuery's AJAX() and GetScript() methods to do this, but in Chrome this fails due to the Same Origin Policy.

XMLHttpRequest cannot load file://test/testdir/test.js. Origin null is not allowed by Access-Control-Allow-Origin.

This happens when I do something simple like

$.getScript("test.js");

This functions perfectly well in IE & Firefox.

After reading a bunch about this, I decided to try writing directly into the head of the document. In the console in Chrome I typed the following:

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);

This works fine when pasted in the console- the <script...test.js</script> element is added to the head, evaluated, and content loaded into the DOM.

I thought this was successful, until I put this code into a function call. The same exact code, when called from a function, adds the element to the but does not evaluate the JavaScript file. I can not figure out why. If I use Chrome's console to stop execution in the method that it is adding the element to the and run the above code, it does not evaluate it. However, if I unpause the execution and run the exact same code (pasting it in the console window) it works. I'm at a loss to explain this. Has anyone dealt with this before?

I've read up on the following SO posts, but they are not describing the problem that I have:

Ways to circumvent the same-origin policy
XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file:/// to file:/// (Serverless)
Cross-site XMLHttpRequest

Again, my last resort is to load all the data at the webpage's load- This can cause up to a 10 second delay in loading the webpage that is unnecessary for 90% of the app's users.

Thanks for any suggestions/alternatives!!!

解决方案

I think I've figured it out.

All I really needed to do was add a callback into my <script> tag. Final code:

I have an element named next... So, in the $("#next").click() function I have the following code. This only gets executed if they click "next".

//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.  
}  

This seems to work, and allows Chrome to dynamically load .js files on the local file system while circumventing the access-control-allow-origin policy I ran into while trying to use jQuery functions.

这篇关于绕过本地文件系统上的Chrome访问控制允许来源？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！