XMLHttpRequest 无法加载 Origin 不允许 Access-Control-Allow-Origin答案

【问题标题】：XMLHttpRequest cannot load Origin is not allowed by Access-Control-Allow-OriginXMLHttpRequest 无法加载 Origin 不允许 Access-Control-Allow-Origin
【发布时间】：2013-01-24 12:20:45
【问题描述】：

我正在尝试通过 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.

【问题讨论】：

Same Origin Policy

标签： javascript ajax google-chrome xmlhttprequest

【解决方案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);
    }
}

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

【讨论】：

没错。如果域不同，则无法通过 XHR 执行此操作。阅读：developer.mozilla.org/en-US/docs/HTTP/…
这个选项并不能完全解决我遇到的 http:// 和 https:// 问题。（即[阻止]mysite.com 的页面运行来自api.widgets.org/widget/1.1.2/… 的不安全内容）
我不完全确定，但我认为这个问题与 http 与 https 没有任何关系，这是跨域资源的问题，无论资源是 http 还是 https，都会被阻止.

【解决方案2】：

我将服务器文件的完整路径改为短路径如下。

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

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

改成，

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

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

然后在 chrome 中运行良好。

【讨论】：

只是想说谢谢你的回答！！由于上面的跨域错误，我有一个 XMLHttpRequest.open() 语句无法正常工作，而通过使用相对路径，我让 Chrome 完美运行。非常感谢。

【解决方案3】：

出于与跨站点脚本相关的安全目的，浏览器阻止向与发出请求的页面服务器不同的服务器发出的 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

【讨论】：