Axios에서 302 상태 코드 문제를 해결하는 방법

이번에는 axios가 302상태 코드 문제를 어떻게 해결하는지 보여드리겠습니다. 302 상태 코드 문제를 해결하기 위해 axios가 사용할 수 있는 주의사항은 무엇인가요?

예를 들어 브라우저가 단일 페이지(SPA) 애플리케이션을 열고 잠시 후 토큰(또는 세션)이 만료되는 경우 페이지에서 Ajax 요청이 시작된 후 백엔드는 302 상태 코드를 반환하고 다음으로 점프합니다. 로그인 페이지. Vue + axios를 사용하고 있는데 axios가 302 요청을 가로챌 수 없는 것을 발견했습니다. 처리 과정은 다음과 같습니다.

Thinking

google axios 302 핸들 axios github

• https://github.com/axios/axios/issues/932

• https://github .com/ axios/axios/issues/980

결론은 다음과 같습니다. 브라우저에서 보낸 ajax 요청에 대해 서버는 302 상태 코드를 반환하고 브라우저는 자체적으로 점프하며 js 라이브러리(jquery, axios)를 직접 사용할 수 없습니다. ) 처리 흐름을 얻고 사용자 정의하려면 브라우저가 해당 정보를 얻기 위해 리디렉션된 후 URL이 나올 때까지만 기다리면 됩니다.

axios는 ajax -->를 보냅니다.
서버는 302와 위치를 반환합니다. -->
브라우저가 새 URL을 요청합니다. -->
서버가 200을 반환합니다. -->

axios가 결과를 얻습니다. 해결책은 무엇입니까? 이 문제를 해결하려면 서버가 협력해야 합니다

Brower(auth 및 ajax 아님) -->

서버는 이것이 ajax 요청이고 로그인되지 않았음을 확인하고 401 상태 코드를 반환합니다. 401을 가로채고 js /login

Solution

을 통해 401로 점프합니다. 브라우저 측에서 axios는 플라스크 프레임워크를 사용하여 인터셉터

axios.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';

백엔드 코드를 추가합니다. 프로세스를 살펴보고 여부를 확인하세요. 요청은 ajax이고 로그인되지 않았으며 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({})
ref

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어의 다른 관련 기사에 주목하세요. 웹사이트!

추천 도서:

vue의 내장 구성요소 선택을 사용하는 단계에 대한 자세한 설명

React 사용 시 재렌더링 방지

위 내용은 Axios에서 302 상태 코드 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!