Maison >interface Web >js tutoriel >Comment résoudre le problème du code d'état 302 dans axios
Cette fois je vais vous montrer comment axios résout le problème du code d'état 302 Quelles sont les précautions pour qu'axios résolve le problème du code d'état 302. Voici les cas pratiques. Jetons un coup d'oeil.
Par exemple, si le navigateur ouvre une application à page unique (SPA) et que le jeton (ou la session) expire après un certain temps, après qu'une requête Ajax soit lancée sur la page, le backend renvoie un code d'état 302 et passe à la page de connexion. J'utilise Vue + axios et j'ai constaté qu'axios ne peut pas intercepter la requête 302. Voici le processus de traitement.Penser
poignée google axios 302 Voir deux discussions sur axios github•https : //github.com/axios/axios/issues/932
• https://github.com/axios/axios/issues/980La conclusion est : parcourez la requête Ajax envoyée par le serveur, le serveur renvoie un code d'état 302, et le navigateur sautera tout seul. Nous ne pouvons pas obtenir et personnaliser directement le processus de traitement via la bibliothèque js (jquery, axios). Nous ne pouvons qu'attendre que l'url soit obtenue après l'obtention de l'url. redirections du navigateur. Informations correspondantes.axios envoie ajax -->Alors comment le résoudre ? Le serveur doit coopérer pour résoudre le problèmele serveur renvoie 302 et l'emplacement -->
axios Obtenez des résultats
Le navigateur demande une nouvelle URL
Le serveur renvoie 200 -- >
Brower (ajax et non auth) -->Le serveur détermine qu'il s'agit d'une requête ajax et n'est pas connecté, et renvoie un Code d'état 401 --->
Le navigateur axios intercepte 401 et accède à /login via js
pour résoudre le problème
côté navigateur, axios ajoute un intercepteuraxios.interceptors.response.use((response) => { return response; }, function (error) { if (401 === error.response.status) { window.location = '/login'; } else { return Promise.reject(error); } }); axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';Code back-end, en utilisant le framework flask, il suffit de regarder le processus, de vérifier si la requête est ajax et non connectée, puis de revenir le code d'état 401
from flask import Blueprint, request, jsonify, make_response, abort from flask_login.utils import current_user, current_app apibp = Blueprint('api', 'api_bp') # 主要逻辑 def bp_login_required(): if not current_user.is_authenticated: if request.is_xhr: abort(401) else: return current_app.login_manager.unauthorized() apibp.before_request(bp_login_required) @apibp.route("/report/domains/<month>/", methods=["GET"]) def monthly_domains(month): return jsonify({}) refJe crois que vous avez lu le cas dans cet article. Après avoir maîtrisé la méthode, veuillez prêter attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant ! Lecture recommandée :
Explication détaillée des étapes à suivre pour utiliser le composant intégré select de Vue
Éviter le nouveau rendu lors de l'utilisation de React
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!