Axios-响应不能拦截-302-状态码?

场景描述

很多网站都会有登录校验,其流程如下:

  1. 访问网站网址;
  2. 服务器发现请求的 Cookie 中没有带有登录信息(一般是一个 Token),就返回一个状态码为 302 的重定向响应,并在响应头的 Location 中写入重定向的地址,这个网址就是我们进行登录的网址;
  3. 浏览器接收到响应后,发现是302,就会用 get 方法重新请求 Location 中指定的登录网址;
  4. 在登录网址输入账号密码登录后,服务端会在响应的 Set-Cookie 中写入我们的登录信息,同时浏览器的代码会重新跳转到我们一开始访问的页面。

以上就是最一般的网站登录流程。其中,302 状态码的响应十分关键,它指引我们去正确的网页登录。

这种情况一般是用户在直接在浏览器中输入地址发生的。最近我遇到的情况是:与后端约定,使用 axios 通过Ajax 的方式请求后端接口,如果发现没有登录,后端会返回一个 302 的重定向响应,然后我拿到响应中 Location 地址后,跳转到该地址去登录。

这看上去很简单,只需要三步:

  1. 发送请求;
  2. 在 axios 的响应中判断状态码,如果是 302 的话,就获取响应头中的 Location 地址;
  3. 使用 js 代码控制浏览器跳转。

实际实施

首先要拿到 axios 的响应。axios 判断正常响应的状态码的逻辑如下:

1
2
3
4
validateStatus: function (status) {
return status >= 200 && status < 300; // default
}
复制代码

所以要改一下校验逻辑,使 302 状态码也能认为是正常的响应:

1
2
3
4
validateStatus(status) {
return status >= 200 && status < 300 || status === 302;
}
复制代码

然后在 axios 响应中做处理:

1
2
3
4
5
6
7
8
9
axios({
url: '/api',
}).then(res => {
const { status, headers: { Location } } = res;
if (status === 302) {
window.location.href= Location;
}
})
复制代码

Nice! 非常简单~

但是实践中却发现代码根本没有运行到 axios 的响应处理这一步,而是直接使用 get 方法请求了重定向的地址。猜想这可能是 axios 默认的行为,但是查询官方文档,却没有发现相关的配置禁用掉这个功能。只有一个 maxRedirects 选项,是应用到 Nodejs 的。

在网上搜寻相关资料,发现也有人提过这个问题,原因是: Ajax 不能处理 302 状态码的响应,这个行为是浏览器的默认行为。 通过查阅标准,标准关于 Ajax 的 readyState = 2 时表示所有的重定向行为(如果有的话)均已经完成并且所有的响应头都已经接收到:

All redirects (if any) have been followed and all headers of a response have been received.

也就是说 Ajax 的请求方式,当接收到响应时所有的重定向已经完成了。

默认重定向的状态码

经过试验,所有的重定向状态码:

  • 301: Moved Permanently
  • 302: Found
  • 303: See Other
  • 307: Temporary Redirect
  • 308: Permanent Redirect