这次给大家带来axios怎样解决302状态码问题，axios解决302状态码问题的注意事项有哪些，下面就是实战案例，一起来看一下。
比如说浏览器打开了一个单页面（SPA）应用，过了一段时间token（或者session）过期了，这个时候页面上发起 Ajax请求之后，后端返回302状态码跳转到login页面。 我这是使用的是 Vue + axios ，发现 axios 无法拦截到 302请求，下面是处理的过程。
思考
google axios 302 handle 看到 axios github 上的两个讨论
• https://github.com/axios/axios/issues/932
• https://github.com/axios/axios/issues/980
得到的结论就是：浏览器发送的ajax请求，服务端返回了302状态码，浏览器会自行跳转，我们无法通过 js 库（jquery, axios) 直接得到并自定义处理流程，只能等到浏览器重定向之后的url获取相应信息。
axios 发送ajax –>
server 返回302和location –>
浏览器请求新的url –>
服务端返回200 –>axios 获取结果
那么怎么解决呢？需要服务端配合解决
Brower (ajax and not auth) –>
server判断是ajax请求，未登陆，返回 401状态码 –>
浏览器 axios 拦截401，并且通过js 跳转到 /login
解决
浏览器端, 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';
登录后复制
后端代码，使用flask框架，看个流程就行，验证请求是否是 ajax 和 未登陆，然后返回401状态码
from flask import Blueprint, request, jsonify, make_response, abortfrom flask_login.utils import current_user, current_appapibp = 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//", methods=["GET"])def monthly_domains(month): return jsonify({})ref
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
vue的select内置组件使用步骤详解
React使用时避免重渲染
以上就是axios怎样解决302状态码问题的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2757247.html
