使用Axios拦截器时无法获取错误响应，error.response未定义

一、error.response 为 undefined 的原因及排查 #

出现AxiosError: NetworkError时，说明请求要么没发送到服务器，要么服务器完全没返回响应，Axios自然拿不到error.response。按以下步骤排查：

• 检查跨域配置：你在请求头里加的Access-Control-*系列头是服务器该返回的响应头，前端请求时不需要带，加了反而可能触发跨域错误。
• 用Postman测接口：直接用Postman调用目标接口，如果也拿不到响应，那是服务器或网络问题；如果Postman能拿到，就是前端代码或浏览器跨域配置的问题。
• 看浏览器Network面板：查看请求的状态码、是否有CORS报错，确认请求到底有没有发出去。

二、代码修正与需求实现 #

你的现有代码存在配置错误和逻辑漏洞，以下是修正后的代码，同时实现401刷新令牌、500等错误跳错误页的需求：

export const authClient = axios.create({
  baseURL: BASE_URL,
  headers: {
    "Content-Type": "application/json",
  },
  withCredentials: true, // 这个配置要放在根层级，不是headers里
});

authClient.interceptors.request.use(
  (config) => {
    const accessToken = getAccessToken();
    if (accessToken && config.headers) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

authClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    // 先处理无响应的网络错误
    if (!error.response) {
      console.error('网络错误：请求未到达服务器或无响应');
      window.location.href = "/error";
      return Promise.reject(error);
    }

    const originalRequest = error.config;
    const { status } = error.response;

    // 401未授权时尝试刷新令牌，加_retry标记避免无限循环
    if (status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      try {
        const newAccessToken = await getNewTokens();
        if (newAccessToken) {
          setAccessToken(newAccessToken); // 假设你有保存新token的方法
          originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
          return authClient(originalRequest);
        }
      } catch (refreshError) {
        console.error('刷新令牌失败：', refreshError);
        window.location.href = "/login"; // 刷新失败可跳登录或错误页，按需调整
        return Promise.reject(refreshError);
      }
    }

    // 500及以上服务器错误跳错误页
    if (status >= 500) {
      window.location.href = "/error";
    }

    return Promise.reject(error);
  }
);

三、关键细节说明 #

• CORS头误区：前端请求不要加Access-Control-*头，这些是服务器返回给浏览器用来允许跨域的，前端加了没用还可能出问题。
• withCredentials配置：必须放在axios.create的根配置里，放在headers里不会生效。
• 防止无限重试：给请求加_retry标记，避免401时反复调用刷新令牌接口导致死循环。
• 网络错误优先处理：先判断error.response是否存在，避免后续代码在无响应时报错。

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