web-dev-qa-db-fra.com

réponse des intercepteurs axios non définie

J'essaie de déconnecter mon utilisateur une fois qu'il a obtenu un 401. J'utilise axios pour renvoyer des données de l'API

Je regardais autour de moi et j'ai trouvé le même 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);
  }
)

Il semble que mon error.response n'est pas défini. Je ne sais pas ce qui ne va pas? des idées?

console.dir of the error

javascriptvue.jsaxiosinterceptor
8
ronoc4

Vous ne recevez pas de réponse de la demande que vous faites avec Axios car le navigateur a reçu une réponse non autorisée 401 lors du contrôle en amont OPTION, ce qui entraîne une erreur réseau pour la demande que vous essayez de faire.

Cela est lié au fonctionnement de CORS et à la manière dont votre backend gère les requêtes OPTION. Pour comprendre comment le serveur principal doit gérer les demandes de contrôle en amont, il est important de comprendre quelle est la motivation derrière l'introduction des demandes de contrôle en amont.

Le serveur principal ne doit pas vérifier l'authentification sur les demandes OPTION, il doit valider que la demande est envoyée à un point de terminaison qui accepte les demandes interdomaines et retourner un code de réussite si c'est le cas.

Ensuite, automatiquement, le navigateur procédera à la demande initialement prévue.

De cette façon, l'intercepteur Axios recevra le code d'erreur 401 si l'utilisateur n'est plus authentifié.

Auto-promotion sans vergogne, j'ai publié un plugin Axios simple appelé axios-middleware qui aide à résumer le utilisation d'intercepteurs Axios dans des applications plus grandes. Il offre un exemple de middleware qui gère automatiquement les demandes non authentifiées en essayant de s'authentifier à nouveau avant de renvoyer la demande.

16
Emile Bergeron

L'objet de réponse sera également indéfini si le contrôle en amont OPTION demande s'est terminée avec succès, mais la réponse pour le prochain GET/POST ne contient pas Access-Control-Allow-Origin en-tête http.

Dans mon cas, ajouter Access-Control-Allow-Origin l'en-tête de la réponse nginx 401 résout le problème

7
razon

ce n'est pas la meilleure pratique mais je le résous de cette façon

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