Why does my JSON status return 0 in Chrome but in IE it works?

Question

Information:

I'm just having fun and learning with Riot API.
I know I should not do everything on the front end.

Issue:

The URL I'm using to get the JSON is not returning the correct status.
This URL should return 401 because the key is incorrect but returns 0.

<!DOCTYPE html>
<html>
<body>
<h1>Meu Projeto</h1>

<button onclick="math()">Current Math</button>
<div id="teste"></div>
<div id="status"></div>
<div id="readystate"></div>
<script>
identificador = 0;

function math(){
  
var url = "https://br.api.pvp.net/observer-mode/rest/consumer/getSpectatorGameInfo/BR1/974721?api_key=5";
  
document.getElementById("teste").innerHTML = "URL: " + url;
var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
  xmlhttp.onreadystatechange = function () {

document.getElementById("status").innerHTML = "Status: " + xmlhttp.status;
document.getElementById("readystate").innerHTML = "ReadyState: " + xmlhttp.readyState;
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     alert("OK");
    }
    if (xmlhttp.readyState == 4 && xmlhttp.status == 401) {
     alert("Unauthorized 401 but OK");
    }
    if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {
     alert("Erro 404 but OK");
    }
    if (xmlhttp.readyState == 4 && xmlhttp.status == 0) {
     alert("status 0 ?");
    }
  }
}

</script>
</body>
</html>

Perhaps because Chrome won't allow the request at all: `XMLHttpRequest cannot load https://br.api.pvp.net/observer-mode/rest/consumer/getSpectatorGameInfo/BR1/974721?api_key=5. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401.` — gpgekko, Dec 18 '15 at 10:36
@gpgekko How do I implement 'Access-Control-Allow-Origin' in the header? — Johnner, Dec 18 '15 at 11:00

score 0 · Accepted Answer · answered Dec 23 '15 at 08:24

The CORS headers aren't set for that endpoint, specifically the 'Access-Control-Allow-Origin' header. Therefore it's inaccessible/restricted.

All endpoints in the Riot Games API usually set these headers, except the current-game and featured-game endpoints. The easiest way to get around this is to make the requests server-side, which you will have to do anyways if you ever want to publish your application.

Why does my JSON status return 0 in Chrome but in IE it works?

1 Answers1