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 在现代Web应用程序中，尤其是单页面应用（SPA）如Vue.js，前端与后端的交互主要依赖于Ajax请求。Axios 是一个广泛使用的JavaScript库，用于处理这些异步数据请求。然而，在某些情况下，比如用户的认证令牌过期，后端可能会返回302状态码，指示浏览器重定向到登录页面。这个问题在使用Vue和Axios时尤为突出，因为Axios本身无法直接拦截和处理302重定向。 302状态码是HTTP协议中的一个状态码，表示临时重定向。当服务器返回这个状态码时，它会同时提供一个新的URL（在`Location`响应头中），浏览器会自动转向这个新URL。对于传统的页面刷新，这种行为是期望的，但对于基于Ajax的SPA，这会导致用户体验中断，因为页面的控制权由前端转移到了浏览器。 在研究了Axios的GitHub问题(#932和#980)后，我们可以得知，由于浏览器的行为，我们无法直接通过Axios或类似的JavaScript库来捕获并处理302重定向。一旦服务器返回302，浏览器会立即处理重定向，前端代码无法介入。因此，我们需要采取一种不同的策略来解决这个问题。 解决方案在于服务端与前端的协同工作。服务端应该能够识别出Ajax请求，并在检测到未认证状态时返回401未经授权的状态码，而不是302重定向。这样，前端的Axios拦截器可以监听到401状态码，然后通过JavaScript来控制页面跳转到登录页面，保持SPA的流畅体验。 在前端，我们可以配置Axios的响应拦截器来处理401状态码。以下是一个示例： ```javascript 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'; ``` 这段代码会在每个请求中添加一个`X-Requested-With`头，标识这是一个Ajax请求，并设置一个响应拦截器，当收到401状态码时，将页面重定向至登录页。 在后端，例如使用Flask框架，我们可以编写中间件或装饰器来检查请求是否为Ajax以及用户是否已认证。如果未认证且请求为Ajax，返回401状态码。下面是一个Flask的简化示例： ```python from flask import Blueprint, request, jsonify, make_response, abort def bp_login_required(): if not current_user.is_authenticated: if request.is_xhr: abort(401) else: return current_app.login_manager.unauthorized() bp = Blueprint('api', 'api_bp') bp.before_request(bp_login_required) @app.route("/report/domains/<month>/", methods=["GET"]) def monthly_domains(month): return jsonify({}) ``` 在这个例子中，`bp_login_required`函数会检查用户状态，如果是Ajax请求且未认证，就返回401状态码。 处理Axios中的302重定向问题需要服务端和前端的共同调整。服务端应返回401状态码，而前端利用Axios的拦截器来处理这个状态码，从而控制页面的跳转逻辑。这种方式保证了SPA的正常运行，同时提供了良好的用户体验。记住，对于任何Web开发中的问题，理解HTTP协议和客户端-服务器交互机制是非常重要的。希望这篇文章能帮助到那些遇到类似问题的开发者。如果你有更多的疑问或需要进一步的帮助，请随时提问。感谢对软件开发网的支持！