CODEWITHSUNDEEP
javascriptvue.jsaxiosinterceptor
ronoc4
ronoc4

Reputation: 637

axios interceptors response undefined

I'm trying to logout my user once they get a 401. I'm using axios to return data from the api

I was looking around and found the same axios.interceptors.response

  axios.interceptors.response.use(
    response => response,
  error => {
    const {status} = error.response;
    if (status === 401 ) {
      store.dispatch('snackBar', snackbarObj)
    } 
   return Promise.reject(error);
  }
)

It appears my error.response is undefined. I'm not sure what is wrong? any ideas?

console.dir of the error

Upvotes: 14

Views: 27786

Answers (4)

Emile Bergeron
Emile Bergeron

Reputation: 17430

You're not getting a response from the request you're doing with Axios since the browser received a 401 unauthorized response when doing the preflight OPTION request, resulting in a Network Error for the request you're trying to do.

This is related to how CORS works and how your backend handles OPTION requests. To understand how the backend server should handle preflight requests, it's important to understand what is the motivation behind introducing preflight requests.

The backend server should not check for authentication on OPTION requests, it should validate that the request is being made to an endpoint that accepts cross-domain requests and return a success code if it does.

Then, automatically, the browser will proceed with the initially intended request.

That way, the Axios interceptor will receive the 401 error code if the user is no longer authenticated.

Shameless self-promotion, I've published a simple Axios plugin called axios-middleware which helps abstract the use of Axios interceptors in bigger apps. It offers an example of middleware that automatically handles unauthenticated requests by trying to authenticate again before resending the request.

Upvotes: 25

4givN
4givN

Reputation: 3244

For those who still struggling with this, use the following error handling for better control

if (error.response) {
  // Request made and server responded
  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
   console.log(error.request);
} else {
   // Something happened in setting up the request that triggered an Error
   console.log('Error', error.message);
}
return Promise.reject(error);

Upvotes: 4

Reza Hashemi
Reza Hashemi

Reputation: 520

it is not best practice but i solve it this way 

axios.interceptors.response.use(
        response => response,
      error => {
        if (typeof error.response === "undefined") {
          // do somthing
        } 
       return Promise.reject(error);
      }
    )

Upvotes: 0

razon
razon

Reputation: 4060

Response object will be undefined also if preflight OPTION request ended successfull, but response for next GET/POST doesn't contain Access-Control-Allow-Origin http-header.

In my case adding Access-Control-Allow-Origin header for nginx 401 response solves problem

Upvotes: 11

Related Questions