vue axios如何拦截302跳转?

Question

用get请求需要登录的页面,未登录情况后端会进行302跳转

用request可以设置followRedirect: false不进行302跳转,axios要怎么设置啊?我想获取302的headers

Answer 1

纯靠 axios 无法拦截。

楼上 @腹中有书气自华 说的 maxRedirects 配置是针对 Node 环境的，浏览器环境下无效。

因为 axios 底层依赖的是 XMLHttpRequest 来实现的 AJAX，但它对 3XX 重定向是由浏览器自动进行的，开发者无法覆写这个结果。而 ES6 中新增的 fetch 原生 API 反倒可以实现拦截 3XX，但可惜的是 axios 出于兼容性考虑底层并没有采用 fetch。

所以解决方案有这么几种：

• 后端配合，返回其他状态码（如 401）而非 3XX，这样 axios 可以拦截；
• 如果你的所有 GET 页面都是幂等的，那么可以先用 fetch 请求一次，然后再走 axios。缺点是不再兼容 IE11 以下版本。
• 修改业务流程吧，一定要拦截响应头吗？拦截重定向之后的数据可不可以？

Answer 2