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

Question

I am trying to get an http:// javascript file via xhr but I am running into the error mentioned above.

Here's my code:

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

This is only for Chrome because I would like to use the script in https:// but Chrome automatically blocks anything from http://. The server from which I am getting the script does not run https:// and I NEED the script/have multiple scripts I'd rather not all copy down into a data file.

The error I'm running into:

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

Just insert the <script> tag directly instead of this XHR wrapper and then inserting the content to a <script> tag.

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

Besides, I don't know, why you try to remove the script element after loading. This wont affect any of the objects/methods/variables created within that code.

Answer 2

I changed to full path of server file to short path as follows.

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

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

Changed it to,

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

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

Then worked fine in chrome.

Answer 3

Browser's block XHR requests made to a server which is different the server of the page making the request, for security purposes related to cross-site scripting.

If it's just a script you want to load, use

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

For general XHR, you can use the jsonp workaround, if the api provides it, or ask the operators of the API to enable CORS (cross-origin resource sharing)

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