Get JSON with the JavaScript XMLHttpRequest Method - produces 404 error

Get JSON with the JavaScript XMLHttpRequest Method - produces 404 error
0.0 0

#1

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


#2

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


#3

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.


#4

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


#5

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:


#6

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: )