catch error message from 404 response with axios or fetch in javascript

Question

I'm trying to support a 404 response from api ( https://rickandmortyapi.com ) with axios.

So when item exists the response looks like this:

{
  "data": {
    "id": 11,
    "name": "Albert Einstein",
    // ...
  },
  "status": 200,
  "statusText": "OK",
  "headers": {
    "content-type": "application/json; charset=utf-8"
  },
  "config": {
    "transformRequest": {},
    "transformResponse": {},
    // ...
  },
  "request": {}
}

If not found response is 404 and the data is like:

{
"error": "Character not found"
}

So I want to read this error message and put this into a variable but no effect. I have something like that for testing:

 new Vue({ el: "#app", data: { existingCharacter: {}, nonExistingCharacter: {} }, methods: { apiRequest (id, character) { console.log('starting Request'); axios('https://rickandmortyapi.com/api/character/'+id, { validateStatus: function (status) { return status < 500; // Reject only if the status code is greater than or equal to 500 }) .then((res) => { console.log('got response'); console.log(res); this[character] = res; } ).catch(function (error) { if (error.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // The request was made but no response was received // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // http.ClientRequest in node.js console.log(error.request); } else { // Something happened in setting up the request that triggered an Error console.log('Error', error.message); } console.log(error.config); }) .then(function () { console.log('request finished'); }); } } }) 

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="columns is-mobile"> <div class="column is-half"> <h2 class="title">existing item: </h2> <button class="button is-fullwidth" @click="apiRequest(11, 'existingCharacter')"> get </button> <pre>{{existingCharacter}}</pre> </div> <div class="column is-half"> <h2 class="title">non existing item:</h2> <button class="button is-fullwidth" @click="apiRequest(1123, 'nonExistingCharacter')"> get</button> <pre>{{nonExistingCharacter}}</pre> </div> </div> </div> 

So as we see there is no response when server responded with 404. Any tips to read this message from 404 response?

I also tried this with fetch but i think the problem is the same. When server returning 404 I've got just error and nothing more. Is it a good practice to return those messages with 404?? I also see that on 404 there is a CORS message in console (maybe this is a key)

Thanks for help. :)

Answer 1

It's a limitation of The Rick and Morty API. It doesn't send CORS headers when the request returns a 404. And when there are CORS issues you can't read the response.

You can check this yourself in the DevTools

---

You can file an issue at their GitHub repo if you want.