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?

Emile Bergeron · Accepted Answer · 2020-08-02T14:55:01.597

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.

How should the Backend be handling it? I’m sending a token in the headers. So on the browser console it says what its in the image above and in the response on the network tab it has “jwt validation failed” – ronoc4 7 hours ago delete — ronoc4, Apr 18 '18 at 05:48
@ronoc4 I updated my answer with additional information on preflight requests. — Emile Bergeron, Apr 18 '18 at 14:08

score 8 · Answer 2 · answered Dec 06 '18 at 06:58

8

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

answered Dec 06 '18 at 06:58

razon

3,128
1
22
40

thanks a lot, this is the good solution, i was facing the same problem, and fixed by setting Access-Control-Allow-Origin from express. – Shree Jan 10 '20 at 08:16

score 3 · Answer 3 · answered Jun 25 '20 at 23:33

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);

score 0 · Answer 4 · answered Nov 12 '19 at 09:29

0

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);
      }
    )

answered Nov 12 '19 at 09:29

Reza Hashemi

388
2
11
20

6

Useless because the whole point is: we are missing information to `//do something` if response is `undefined` – LittleTiger Dec 23 '19 at 06:48

axios interceptors response undefined

4 Answers4

Linked