How to reading out XMLHttpRequest responses

Question

I'm doing a XMLHttpRequest like this:

var url = "myurl.html";
var http_request=new XMLHttpRequest();
http_request.onreadystatechange=function(){
  if (http_request.readyState === 4){
    console.log(http_request.response);
  }
};
http_request.withCredentials = true;
http_request.open('GET',url,true);
http_request.send(null);

In the console http_request.response is empty but when I look in Chrome into the networks Tab I get this stuff

How do I get to this stuff from JavaScript?

Answer 1

The request comes from a different computer on the same network. The server at myurl.html doesn't allow "Access-Control-Allow-Origin". For this, in the header of the response must be something like this:

Access-Control-Allow-Origin: *

(* stands for wildcard)

When the header is lacking that information, Chrome will block the response in the JavaScript. Hence, the network tab will show the response but not the JS console. To bypass CORS in different browsers there are several methods. I used an extension from the Chrome web store for Chrome.

To further ensure that the request was done correctly, the callback function can be modified to this:

http_request.onreadystatechange = function () {
  if(http_request.readyState === XMLHttpRequest.DONE && http_request.status === 200) {
    console.log(http_request.responseText);
  }
};

http_request.readyState should be 4, the status however should be 0 (even though in the Network tab it will appear as 200).