axios响应拦截器token过期时不执行错误逻辑且返回200如何修复

• 先确认后端鉴权失败的返回规则：大部分业务后端不会直接返回401的HTTP状态码，而是统一返回200的HTTP状态码，将鉴权失败的标识放在响应体的业务字段（比如code、msg字段）里。axios默认仅当HTTP状态码落在2xx区间外才会走响应拦截器的错误回调，这是你没触发错误处理的最常见原因。
• 检查proctedInstance的validateStatus配置：如果你自定义了validateStatus规则，比如设置为status => status >= 200 && status < 500，会把401等状态码也判定为成功响应，直接走成功回调不会进错误处理。
• 核对实际响应的HTTP状态码：打开浏览器控制台的网络面板，查看/protected请求的真实HTTP状态码和响应体内容，确认是否和你的预期一致。

你提供的响应截图参考：

1. 适配后端200状态码返回鉴权失败的场景 #

如果后端确实是在200的响应体里返回鉴权失败标识，需要在响应拦截器的成功回调中增加业务状态判断，手动抛出错误触发刷新逻辑：

proctedInstance.interceptors.response.use((response) => {
    console.log(response);
    // 示例：假设后端约定鉴权失败时响应体code字段为401
    if (response.data.code === 401) {
        // 手动抛出错误，流转到下方错误拦截器处理
        return Promise.reject({response});
    }
    return response
}, 
// 原有错误处理逻辑调整
function (error) {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
        originalRequest._retry = true;
        // 用自定义实例发刷新请求，不要用全局axios
        return proctedInstance.post('http://localhost:4000/refresh_token')
            .then(res => {
                if (res.status === 200) {
                    localStorage.setItem('accesstoken', res.data.accesstoken)
                    console.log('my token res.data.accesstoken', res.data.accesstoken);
                    // 更新当前自定义实例的header，不要更新全局axios的
                    proctedInstance.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('accesstoken');
                    // 重发请求用自定义实例，不要用全局axios
                    return proctedInstance(originalRequest);
                }
            })
            .catch(err => {
                // 新增：refresh_token也过期时，清理本地存储跳转到登录页
                localStorage.removeItem('accesstoken');
                window.location.href = '/login';
                return Promise.reject(err);
            })
    }
    return Promise.reject(error);
})

2. 修复原有代码的其他问题 #

请求拦截器的错误回调缺少return，导致错误无法正常抛出，修改如下：

proctedInstance.interceptors.request.use(
    async config => {
        const accesstoken = localStorage.getItem('accesstoken');
        config.headers = {
            'Authorization': `Bearer ${accesstoken}`,
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
        }
        return config;
    },
    error => {
        // 补充return抛出错误
        return Promise.reject(error);
    }
)

另外不要混用全局axios和自定义的proctedInstance，刷新token、更新header、重发请求都用你自己创建的实例，避免配置不同步的问题。

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