Cannot call API by JavaScript from localhost

Question

I am trying to pull data from API and display obtained data in HTML page. My problem is that I cannot actually get access to API data as status is 0 and statusText is empty. I run my page with XAMPP.

var xmlhttp = new XMLHttpRequest();
var url = "http://swapi.co/api/people/1";
xmlhttp.open("GET", url, true)
xmlhttp.send()


xmlhttp.onreadystatechange=function(response) {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}

console.log(xmlhttp.status)
console.log(xmlhttp.statusText)

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].name +
        "</td><td>" +
        arr[i].films +
        "</td><td>" +
        arr[i].gender +
        "</td></tr>";
    }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
   
  <title>swapi</title>
</head>
<body>
   <div id="id01"></div>
</body>
 </html>

Sounds like a cross domain issue? swapi.co would need to allow access from localhost, which for good reason it probably doesnt. Send a CORS header up with the request/response, or use a reverse proxy to trick the request to think it's talking to the same domain. Or just disable security on your browser if it's a temporary thing. — oooyaya, May 05 '16 at 18:24
Thanks, it looks helpful, but in case I want to add CORS should I add `function createCORSRequest(method, url) {}` to my code? Also, I use Chrome, so I assume that you advised to disable security by using cmd. — marianess, May 05 '16 at 18:49
In chrome, you can disable security by following [these instructions](http://stackoverflow.com/questions/35432749/disable-web-security-in-chrome-48-and-49). I can't say enough that this is a bad idea and needs to only be used for your testing. Don't expore the internet with this in place. Perfect world, you'd proxy in XAMPP's apache config so that /path/to/service hits Apache, and Apache routes that out to swapi.co. Or the correct way is to implement cross-origin policy considerations (CORS headers mostly) but that requires changes to swapi.co as well as your end. — oooyaya, May 05 '16 at 18:54
If it's cores there'll in an error in console. What is the error you're getting? — T J, May 06 '16 at 05:16
There is no errors displayed on console at all. I just have `console.log(xmlhttp.status)` 0 and `console.log(xmlhttp.statusText)` empty. Last one should be 200. — marianess, May 06 '16 at 06:29

score 0 · Accepted Answer · answered May 06 '16 at 09:13

The problem could be that you're attaching the handler only after sending the request. Try:

var xmlhttp = new XMLHttpRequest();
var url = "http://swapi.co/api/people/1";
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function(response) {
  console.log(xmlhttp.status);
  console.log(xmlhttp.statusText);
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myFunction(xmlhttp.responseText);
  }
};
xmlhttp.send();

Since you're using backbone with jQuery you can use $.get():

$.get("http://swapi.co/api/people/1").done(myFunction);

Note that textStatus will be the second argument passed to myFunction. If that's a concern you can do:

$.get("http://swapi.co/api/people/1").done(function(data,textStatus){
  myFunction(textStatus);
});

Cannot call API by JavaScript from localhost

1 Answers1