Fetch returning 404 error: "GET <urlthatIwasfetchinghere> 404 (Not Found)"

Question

I am using fetch and it is to my understanding that 404 codes should happen but not GET 404 errors when fetching from a non existent page. I am using the open weather map api. The error that I'm getting is GET ${forcastUrl} 404 (Not Found).

My fetch statement looks like this:

function fetchingForcast(forcastUrl){
    fetch(forcastUrl)
    .then(validateWeatherResponse)
    .then(responseToJSON)
    .then(dat => {
      forcastDat = dat;
      updateforcastPanel();
    })
    .catch(error=>{
      console.log(error);
    })
  }

function validateWeatherResponse(response){
  if (response.ok){
    return response;
  } else {
    throw Error("response.ok: "+ response.ok);
  }

validateWeatherResponse checks if the response is ok and if not, it throws an error. However, when it does throw an error, it should go to catch and console.log the error. When I use the debug devtool on chrome, the error appears to happen as soon as validateWeatherResponse is called.

Besides for this error, my code works when I input a correct website. It is to my understanding that 404 errors should not occur so I'd like to understand why this is happening. Thanks!

Answer 1

From MDN's HTTP status code documentation:

404 Not Found The server can not find the requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. This response code is probably the most famous one due to its frequent occurrence on the web.

The 404 error code means that the website or endpoint that you requested does not exist, which is definitely expected if you request a non-existent page.

If you are still confused about the error, please tell me in a comment.