使用Axios拦截器刷新JWT时如何阻止403错误输出到浏览器控制台

1. 403错误是否默认会在浏览器控制台打印 #

是的，这是浏览器的默认行为：只要HTTP请求返回4xx、5xx类的非2xx成功状态码，即使你在Axios拦截器中捕获了错误并完成了后续的Token刷新逻辑，DevTools的Console面板也会自动打印这条错误请求的日志，和你的业务逻辑正确性无关。

2. 阻止错误打印的两种可行方案 #

方案一：仅修改客户端Axios配置 #

在创建Axios实例时新增validateStatus配置项，将JWT过期对应的403状态码纳入合法状态范围，Axios就不会将该请求判定为错误抛出，浏览器也不会打印对应日志。
示例代码：

const request = axios.create({
  baseURL: '/api',
  // 自定义合法状态码范围
  validateStatus: (status) => {
    return (status >= 200 && status < 300) || status === 403
  }
})

后续你只需要在响应拦截器中自行判断状态码和响应内容，识别到JWT过期的场景后走刷新逻辑即可。

方案二：配合服务端修改响应规则 #

服务端校验JWT过期时，不返回403状态码，改为返回200状态码，在响应体中新增自定义错误码（比如code: 10001）标识JWT过期。由于请求本身返回2xx成功状态码，浏览器自然不会打印错误日志，客户端只需要在拦截器中判断自定义错误码即可触发刷新逻辑。

3. 两种Token刷新方案的选择建议 #

无需放弃拦截器被动刷新方案，两种方案可以结合使用：

• 被动拦截刷新：逻辑简单，不需要维护客户端定时器，可作为兜底方案，解决极端场景下的Token过期问题
• 提前主动刷新：在Token过期前3-5分钟主动调用刷新接口，避免产生无效的过期请求，也能从根源上避免403日志的产生

生产环境中通常会同时使用两种方案，既保证逻辑可靠性，也能优化用户体验和控制台日志清洁度。

内容的提问来源于stack exchange，提问作者J C