Axios의 302 상태 코드

이번에는 Axios의 302 상태 코드를 가져오겠습니다. Axios에서 302 상태 코드를 사용할 때 주의 사항은 무엇인가요?

예를 들어 브라우저가 단일 페이지(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)를 통해 ajax 요청을 직접 얻을 수 없습니다. , 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를 사용하여 로컬 json을 요청하는 방법

JS 작업 JSON 배열 중복 제거

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