XMLHttpRequest无法加载原产地不允许访问控制允许来源

Question

我想通过xhr得到一个http：// javascript文件，但我遇到了上面提到的错误。

这里是我的代码：

function getXHR() { 
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 

    if (is_chrome) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", "http://api.widgets.org/widget/1.1.2/widget_api.js?autoCreate=false&log=true", true); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     var s = document.createElement('script'); 
     s.textContent = xhr.responseText; 
     (document.head||document.documentElement).appendChild(s); 
     s.parentNode.removeChild(s); 
     } 
    } 
    xhr.send(); 
    } 
} 

这仅适用于Chrome浏览器，因为我想使用HTTPS的脚本：//而Chrome会自动阻止任何的http：//。从中获得脚本的服务器不运行https：//并且我需要脚本/有多个脚本，我宁愿不要将它们全部复制到数据文件中。

我遇到的错误：

XMLHttpRequest cannot load http://api.widgets.org/widget/1.1.2/widget_api.js?autoCreate=false&log=true. Origin https://mysite.com is not allowed by Access-Control-Allow-Origin. 

Answer 1

只需插入<script>标签，而不是直接的这个XHR包装，然后插入内容到<script>标签。

function getScript() { 
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 

    if (is_chrome) { 
     // generate script element and set its source 
     var s = document.createElement('script'); 
     s.src = "http://api.widgets.org/widget/1.1.2/widget_api.js?autoCreate=false&log=true"; 
     // remove the script element after loading 
     s.addEventListener('load', function(){ s.parentNode.removeChild(s); }); 
     (document.head||document.documentElement).appendChild(s); 
    } 
} 

此外，我不知道，为什么你试图删除加载后的脚本元素。这不会影响在该代码中创建的任何对象/方法/变量。

Answer 2

为了与跨站点脚本相关的安全目的，浏览器的阻止XHR向服务器发出的XHR请求，该服务器与发出请求的页面的服务器不同。

如果只是要加载脚本，使用

<script src="..."></script> 

对于一般XHR，你可以使用JSONP解决方法，如果API提供，或询问API的运营商，使CORS（跨域资源共享）

http://developer.chrome.com/extensions/xhr.html https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS http://www.w3.org/TR/cors/ http://en.wikipedia.org/wiki/JSONP

Answer 3

我改为福将服务器文件的路径设置为短路径，如下所示。

$.post('http://example.com/pages/loadRandomImages.php',{'type':'loadRandomImages','loadingReq':'True'},function(data){ 

------------ 
---------- 
}); 

把它改成，

$.post('/pages/loadRandomImages.php',{'type':'loadRandomImages','loadingReq':'True'},function(data){ 

------------ 
---------- 
}); 

然后在铬工作得很好。