如何在Axios中识别CORS错误并区分网络断开错误？

问题背景 #

已配置Axios响应拦截器捕获网络错误，但无法识别CORS错误，需要针对两种错误给出不同提示：

• 网络断开：显示「您未连接互联网」
• CORS错误：显示「API的CORS配置不正确，请联系管理员」

原拦截器代码：

const errorInterceptor = error => {
  if (error.code === 'ERR_NETWORK') {
    throw new Error('Network is not connected')
  }
  // The rest of the code
}

解决方案 #

可以通过Axios错误对象的几个特征来区分CORS错误：

• CORS错误发生时，浏览器会因安全限制拒绝返回服务器响应，因此error.response为undefined
• 多数浏览器环境下，error.message会包含"cors"相关关键词
• 对应的请求实例（error.request）状态码会是0

结合这些特征，修改拦截器代码如下：

const errorInterceptor = error => {
  // 匹配网络断开错误
  if (error.code === 'ERR_NETWORK') {
    throw new Error('您未连接互联网')
  }
  // 匹配CORS错误
  if (!error.response && error.request?.status === 0 && error.message.toLowerCase().includes('cors')) {
    throw new Error('API的CORS配置不正确，请联系管理员')
  }
  // 其他错误统一抛出
  return Promise.reject(error)
}

补充说明 #

• 不同浏览器对CORS错误的描述文本可能略有差异，用toLowerCase()和includes('cors')做模糊匹配能提升兼容性
• 加可选链?.是为了兼容Node.js环境（此时error.request不是XMLHttpRequest实例），避免出现读取status时的报错

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