XMLHttpRequest无法加载来源.访问控制允许来源不允许

XMLHttpRequest cannot load Origin is not allowed by Access-Control-Allow-Origin

本文关键字：不允许 访问控制 加载 XMLHttpRequest      更新时间：2023-09-26

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

只需直接插入<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);
    }
}

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

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

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

更改为

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

然后在铬中表现良好。

Browser的块XHR请求被发送到与发出请求的页面的服务器不同的服务器，用于与跨站点脚本相关的安全目的。

如果这只是一个你想加载的脚本，请使用

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

对于一般的XHR，如果api提供，您可以使用jsonp解决方法，或者要求api的操作员启用CORS（交叉源资源共享）

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

相关文章：