Cfrgtkky

I cannot access the error (response) status code if an axios request has failed in my Vue.js app. I cannot figure out why the response is undefined in both '.catch' and 'axios.interceptors.response'. I followed this instruction that demonstrates that 'error.response' can be easily accessed with a code like this:

axios.interceptors.response.use(

  (response) => { 

    console.log(response);

    return response;

  },  

  (error) => {

    handleApiFail(error.response);

  });

If I add this code to 'main.js' in my app, 'handleApiFail' is called when a request fails, but error.response is undefined in the second lambda and the first lambda is not called. If a request succeeded the 'response' in the first lambda is defined and has the status code.

EDIT1: this is not an option because my OPTIONS requests do not require authorization. Also there are various posts describing the same situation.

This is an idiosyncrasy of axios. A quick solution to this is to serialize the response:

JSON.stringify(error)

Please refer to this GitHub issue for more info: https://github.com/axios/axios/issues/960

As someone pointed out there, you can check the error status code in the action and run some other commit depending on it.

The lack of

access-control-allow-origin: *

header in the response caused the browser to block my request.

Adding the header makes axios work fine.