XMLHttpRequest nie można załadować Origin nie jest dozwolona przez Access-Control-Allow-Origin

Question

Próbuję uzyskać http: // javascript za pośrednictwem xhr, ale mam uruchomiony błąd wspomniany powyżej.

Oto mój kod:

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

To jest tylko dla Chrome, ponieważ chciałbym użyć skryptu w https: // ale Chrome automatycznie blokuje coś od http: //. Serwer, z którego uzyskuję skrypt, nie działa w trybie https: // i POTRZEBUJĘ skryptu/mam wiele skryptów, których nie chciałbym kopiować do pliku danych.

Błąd biegnę do:

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

Wystarczy włożyć <script> tag bezpośrednio zamiast tego XHR opakowanie a następnie wstawienie treści do <script> tagu.

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

Poza tym, nie wiem, dlaczego próbujesz usunąć element skryptu po załadowaniu. To nie wpłynie na żaden z obiektów/metod/zmiennych utworzonych w tym kodzie.

Answer 2

Blokowanie przez przeglądarkę żądań XHR na serwerze, który różni się serwerem strony wysyłającej żądanie, ze względów bezpieczeństwa związanych ze skryptami cross-site.

Jeśli to tylko scenariusz chcesz załadować, użyj

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

Ogólne XHR, można użyć obejście jsonp, jeżeli API zapewnia go, albo poprosić operatorów API, aby umożliwić CORS (współdzielenie zasobów cross-pochodzenie)

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

Zmieniłem do fu ll ścieżka pliku serwera do krótkiej ścieżki w następujący sposób.

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

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

Zmieniono go,

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

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

Następnie pracował dobrze w chromie.