javascript - XMLHttpRequest 无法加载 Access-Control-Allow-Origin 不允许的来源

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

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