Axios捕获504错误时error.response为undefined而404正常是什么原因？

问题诱因 #

Axios 抛出的错误对象存在3种场景，只有「请求成功发出且服务端返回了HTTP响应」的场景下才会存在error.response字段，504错误时该字段为undefined，常见诱因如下：

• Axios 超时阈值小于网关超时时间：如果你的Axios配置了timeout参数，比如设置为3000ms，而网关侧的超时时间是5s，那么请求触发超时后Axios会直接抛出中断错误，此时还未收到网关返回的504响应，自然不存在error.response，此时可以通过error.code === 'ECONNABORTED'判断是Axios主动触发的超时错误。
• 网关返回的504响应缺少跨域头：404状态码一般是业务服务正常返回的，会携带符合要求的CORS跨域响应头，浏览器会把响应内容开放给JS层；而504是网关层返回的，如果网关没有配置跨域头，浏览器会基于同源策略拦截响应内容，不让JS侧拿到响应数据，此时error.response就会为undefined，这种情况浏览器控制台会明确报CORS相关错误。
• 网络异常中断：请求发出后客户端网络断开、弱网等情况，导致无法接收到网关返回的504响应，也会出现该问题。

兼容处理方案 #

可以在catch块中补充错误类型判断逻辑，覆盖所有异常场景，参考修改代码如下：

try {
  const response = await axios.request({
    method,
    url,
    headers: {
      'Content-Type': 'application/json;charset=UTF-8',
    },
    ...config,
  });
  return response;
} catch (error) {
  console.dir(error);
  // 优先判断有响应的情况
  if (error.response) {
    const status = error.response.status
    if (status === 401) {
      const isNonAuthUrl = window.location.pathname.match(/\/verify\//);
      if (!isNonAuthUrl) {
        localStorage.clear();
        window.location.reload();
      } else {
        throw error;
      }
    } else if (status === 504) {
      // 处理能拿到响应的504逻辑
      console.error('网关超时，请稍后重试')
      throw error
    } else {
      throw error;
    }
  } else if (error.request) {
    // 请求发出但无响应，覆盖超时、无响应的504、网络断开等场景
    if (error.code === 'ECONNABORTED') {
      console.error('请求超时，请检查网络或稍后重试')
    } else {
      console.error('网络异常，请检查网络连接')
    }
    throw error
  } else {
    // 请求配置错误，未成功发出
    console.error('请求配置错误：', error.message)
    throw error
  }
}

排查验证方法 #

1. 先查看浏览器控制台的Network面板，找到对应504请求，确认响应头是否存在Access-Control-Allow-Origin等跨域相关配置；
2. 临时调大Axios的timeout参数值（比如设置为30000，即30秒），再次复现504场景，如果此时能拿到error.response则说明是之前的超时阈值设置过小导致的问题。

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