error.response is undefined if axios request fails

Question

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.

Answer 1

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.

Answer 2

I have code like this:

axios.interceptors.response.use(null, (error) => {
    .........
    return Promise.reject();
});

Then, I found I miss to return my "error" in promise reject, correct like this:

return Promise.reject(error);