XMLHttpRequest無法加載Access-Control-Allow-Origin不允許使用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);
    }
}

此外，我不知道，為什么你在加載后嘗試刪除腳本元素。 這不會影響在該代碼中創建的任何對象/方法/變量。

Answer 2

我將服務器文件的完整路徑更改為短路徑，如下所示。

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

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

改成了，

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

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

然后在鉻工作得很好。

Answer 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