如何在Axios无响应时获取正确的错误状态码（如404）

当你遇到Axios catch块中code为0、无法获取Postman里能看到的404状态码时，核心原因是跨域（CORS）限制：浏览器的同源策略会拦截跨域请求的错误响应，导致Axios无法拿到真实的404状态，而Postman不受浏览器同源策略约束，所以能正常看到响应。

具体解决方案： #

• 确认跨域场景：检查当前页面域名和请求目标域名的协议、域名、端口是否完全一致，任一不同即为跨域请求。
• 后端配置CORS响应头：要求后端在所有响应（包括404等错误响应）中添加CORS相关头，示例如下（以Node.js/Express为例）：

  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*'); // 生产环境建议指定具体域名
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
  });
  
  // 即使是404路由，也要确保CORS头已设置
  app.use((req, res) => {
    res.status(404).send('Not Found');
  });
  

• 本地开发代理转发：如果是本地开发阶段，可以通过代理服务器转发请求，绕过跨域限制。比如在Vue项目中配置vue.config.js：

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'https://ms.com',
          changeOrigin: true,
          pathRewrite: { '^/api': '' }
        }
      }
    }
  };
  // 之后请求改为 axios('/api/s')
  

• 完善Axios错误处理逻辑：在catch块中区分不同错误类型，避免获取不到response时报错：

  (async () => {
    try {
      const res = await axios('https://ms.com/s');
    } catch(e) {
      if (e.response) {
        // 服务器返回了响应（状态码非2xx）
        console.log('状态码:', e.response.status); // 此时可以拿到404
        console.log('响应数据:', e.response.data);
      } else if (e.request) {
        // 请求已发送但无响应（通常是跨域或网络问题）
        console.log('请求已发送但无响应，可能是跨域限制');
      } else {
        // 请求配置阶段出错
        console.log('请求配置错误:', e.message);
      }
    }
  })();
  

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