使用axios拦截器时无法获得错误响应

Question

error.response 未定义
我想知道这是我的代码还是服务器的问题。如果错误状态是401，我将通过刷新令牌获取新令牌。如果是 500 或其他，我会将其他人路由到错误页面。

export const authClient = axios.create({
  baseURL: BASE_URL,
  headers: {
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS",
    "Access-Control-Allow-Credentials": "include",
    withCredentials: true,
  },
});

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

authClient.interceptors.response.use(
  async (response) => {
    return response;
  },
  async (error) => {
    const originalRequest = error.config;

    try {
      const newAccessToken = await getNewTokens().catch((tokenError) => {
        throw tokenError;
      });

      if (newAccessToken) {
        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
        return authClient(originalRequest);
      }
    } catch (refreshError) {
      return Promise.reject(refreshError);
    }

    window.location.href = "/error";
    return Promise.reject(error);
  }
);

我想在收到错误响应后使用它。
我只收到 AxiosError : NetworkError

Answer 1

在某些情况下，请求可能会失败且没有响应数据：

• 连接不稳定
• 超时
• 无法解析域名
• HTTPS 配置错误
• CORS 配置错误

在这些情况下，error.response 将是未定义的。您可以尝试查看 error.cause 来进一步调查。

您没有在问题中指定，但假设它是前端代码，您可能会遇到 CORS 问题。如果您没有收到如下所示的任何错误，请检查您的开发工具控制台：

从源“https://yourwebsite.com”获取“https://yourserver.com/”的访问已被 CORS 策略阻止：Access-Control-Allow-Headers 不允许请求标头字段内容类型在飞行前响应中。