Get JSON with the JavaScript XMLHttpRequest Method - produces 404 error

Tell us what’s happening:

Actually trying to use this generates a 404 error:
/json/cats.json:1 Failed to load resource: the server responded with a status of 404 ()

This should be straightforward – this exercise explains using XMLHttpRequest and just asks you to repeat the sample code. Possibly there’s a problem with /json/cats.json ?

Your code so far


<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('getMessage').onclick=function(){
      // Add your code below this line

req=new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload=function(){
json=JSON.parse(req.responseText);
document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
};
      
      // Add your code above this line
    };
  });
</script>
<style>
  body {
    text-align: center;
    font-family: "Helvetica", sans-serif;
  }
  h1 {
    font-size: 2em;
    font-weight: bold;
  }
  .box {
    border-radius: 5px;
    background-color: #eee;
    padding: 20px 5px;
  }
  button {
    color: white;
    background-color: #4791d0;
    border-radius: 5px;
    border: 1px solid #4791d0;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    background-color: #0F5897;
    border: 1px solid #0F5897;
  }
</style>
<h1>Cat Photo Finder</h1> 
<p class="message box">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method

I ran your code and it passed. I’m using FireFox to run it.

Yep, it passes fine.
But look at the page, nothing is actually being retrieved and replaced. If you have a web browser dev tools open (I’m using Chrome but know there’s the same in Firefox) I think you’ll see the 404 error on that console.
When I go to the next problem in the series, it uses the same code and generates the same 404 error.

I believe its just FCC is trying to call something on a broken path. These are warning issues on the console but still runnable.

It is a bug. The actual url which works is https://www.freecodecamp.org/json/cats.json, but you can not use it without getting a CORS error:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://learn.freecodecamp.org’ is therefore not allowed access.

It has already been reported on Github via the following request:

Makes sense. Thank you for the explanation and the link to the github report.

(Ahhh, the dreaded CORS issues – run into that several times going through the front end dev exercises and projects :slight_smile: )