How to overcome Xmlhttprequest cannot load?

Question

This error appears to me. How to overcome it?

Xmlhttprequest cannot load "example url". No 'Access-Control-Allow-Origin' header is present on the requested Resource. Origin 'null' is therefore not allowed access.

Code

var url = "http://www. url exemplo"; //url que tem a informação
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var json = JSON.parse(xmlhttp.responseText);
        console.log(json);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send(); 

Answer 1

Firstly, it should be noted that the browser established the origin of the call as null. The source (the schema/domain/port trio that identifies where you are) usually refers to the site on which the code is running - whether the site itself (if the code is yours) or not (if it is a third-party code - an ad for example - running on your site). But if it is null, that is a sign that the code is in a "protected environment" (Sandboxed). Most likely, a iframe with the attribute sandboxed and without the option allow-same-origin.

A code in such circumstances is not considered reliable for his host, and therefore cannot access resources from the same source (i.e. by Politics of the Same Origin, It’s like this code is on another site, not on your) inclusive make ajax calls to the same source. I believe some browsers would even allow ajax calling anywhere (some tests I did in the past - see link above - had that result).

However, it seems to me that the browser that you are using is more "reasonable" - it allows content Sandboxed make ajax for servers that implement Cross-Origin Resource Sharing (CORS). Thus, he checked whether the server in question (his own? any other? ) returned the header Access-Control-Allow-Origin, in order to find out whether or not other websites were allowed to make ajax requests to it. In the absence of a positive response (i.e. the absence of the header), he took the safe option that was to block the call.

To solve, you would have to of the three a:

• Remove the attribute sandboxed of your iframe;
• add the option allow-same-origin on the same; or:
• Enable CORS on your server.

Each of them has security implications. You first need to respond to yourself "where does this code come from?" "is it reliable?" and "what harm would it have if some X site made ajax requests to my server?" before deciding on a suitable solution.

Answer 2

Hello. You can do it like this: Example:

var xhr = new XMLHttpRequest();

xhr.open("GET","https://api.github.com/users/itasouza");
xhr.send(null);

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        console.log(JSON.parse(xhr.responseText));
    }
}