Windows环境下React.js调用axios.get请求出现Network Error求助

• 验证请求URL有效性
  先确认CoinList(currency)返回的URL是否正确，直接复制该URL到浏览器地址栏访问，看能否正常获取数据。如果浏览器也无法访问，说明问题出在目标API本身（比如域名错误、API下线、需权限验证等）；如果浏览器能正常访问，再排查前端侧问题。

• 解决跨域问题
  React开发环境默认使用localhost:3000，若目标API的域名/端口与本地服务不一致，会触发跨域限制：

  1. 配置代理：在项目根目录创建setupProxy.js文件，先安装依赖npm install http-proxy-middleware --save-dev，再添加配置：

     const { createProxyMiddleware } = require('http-proxy-middleware');
     
     module.exports = function(app) {
       app.use(
         '/api', // 替换为目标API的前缀路径
         createProxyMiddleware({
           target: 'https://目标API域名', // 替换为实际API地址
           changeOrigin: true,
         })
       );
     };
     

     修改axios请求为相对路径（如axios.get('/api/xxx')）后，重启开发服务。
  2. 临时跨域测试：在package.json的scripts中修改start命令：

     "start": "react-scripts start --disableHostCheck true"
     

     注意：此方法仅适合开发环境临时验证，正式环境需后端配置CORS。

• 排查Windows网络环境

  1. 关闭本地防火墙或杀毒软件，测试是否是拦截导致的请求失败。
  2. 检查系统代理设置：打开Windows设置→网络和Internet→代理，确保自动检测设置开启，或手动代理未干扰请求。
  3. 切换网络环境（如WiFi换有线、用手机热点），排除本地网络故障。

• 优化Axios请求配置

  1. 添加错误捕获，打印详细错误信息定位问题：

     const fetchCoins=async()=>{
       setLoading(true);
       try {
         const {data}=await axios.get(CoinList(currency));
         setCoins(data);
       } catch (error) {
         console.error('错误详情:', error);
         console.error('响应信息:', error.response);
         console.error('请求配置:', error.config);
       } finally {
         setLoading(false);
       }
     }
     

     通过error.code（如ECONNREFUSED连接拒绝、ETIMEDOUT超时）进一步定位原因。
  2. 添加超时配置，避免请求超时引发错误：

     await axios.get(CoinList(currency), { timeout: 10000 }); // 设置10秒超时
     

• 重启开发服务
  关闭并重新启动React开发服务器（npm start），排除服务异常导致的请求发送失败。

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