이번에는 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 /loginSolution
을 통해 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을 요청하는 방법위 내용은 Axios의 302 상태 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!