axios interceptors response undefined

Question

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?

Answer 1

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.

Answer 2

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