Search code examples
javascripthtmljsonruntime-errorriot-games-api

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

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>

Solution

  • 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.