如何解决React.js中的AxiosError: Network Error网络错误

常见排查与修复步骤 #

• 核对请求URL准确性
  确认URL是完整绝对路径（如https://api.example.com/data），无拼写错误；若对接本地后端，需保证域名、端口与后端服务启动状态完全匹配。

• 处理跨域问题
  这是此类报错的高频诱因：

  • 后端为Node.js/Express时，添加CORS中间件：

    const cors = require('cors');
    app.use(cors());
    

  • React开发环境可在package.json中配置代理：

    "proxy": "http://localhost:3001" // 替换为你的后端服务地址
    

  • 生产环境需在后端配置允许前端域名的跨域请求头。

• 验证后端服务状态
  直接在浏览器地址栏或Postman中访问请求URL，确认后端服务是否正常启动、端口未被占用、能正常返回数据。

• 查看浏览器网络请求详情
  打开浏览器开发者工具（F12）切换到Network标签，重新发起请求后检查：

  • 请求的状态码、请求头与响应头
  • OPTIONS预检请求是否失败
  • 请求是否被广告拦截器、VPN等浏览器扩展拦截

• 检查Axios配置
  确认Axios的baseURL、超时时间等配置无误：

  import axios from 'axios';
  const api = axios.create({
    baseURL: 'https://api.example.com', // 确保地址正确
    timeout: 10000 // 适当延长超时时间
  });
  

• 处理SSL证书问题（HTTPS请求）
  本地开发环境的自签名证书可能被浏览器拒绝，可临时关闭Axios的SSL验证（仅开发环境使用）：

  const https = require('https');
  axios.get(url, {
    httpsAgent: new https.Agent({ rejectUnauthorized: false })
  });
  

  生产环境必须使用合法的SSL证书。

错误捕获与调试 #

在代码中添加完整错误捕获，获取更详细的报错信息：

axios.get('/api/data')
  .then(res => console.log(res))
  .catch(err => {
    console.log('错误详情:', err);
    console.log('请求配置:', err.config);
    if (err.response) {
      // 服务器返回错误状态码
      console.log('响应数据:', err.response.data);
      console.log('状态码:', err.response.status);
    } else if (err.request) {
      // 请求已发送但无响应
      console.log('请求对象:', err.request);
    }
  });

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