未修改代码却出现Axios Network Error，求问题成因与排查方法

Axios Network Error是Axios发起HTTP请求时无法完成连接或获取响应时抛出的通用错误，它不指向单一具体问题，需要结合场景排查。以下是常见成因及针对你情况的排查建议：

常见成因 #

• 后端服务不可达：本地开发时后端服务未启动、端口未监听，或线上服务宕机/维护。你两个项目同时出问题，可能是共用的后端服务故障，或本地开发环境的全局服务异常。
• 跨域（CORS）配置失效：后端未正确配置跨域响应头（如Access-Control-Allow-Origin），即使你没修改前端，后端配置变更也会导致请求被浏览器拦截，触发Axios Network Error。
• 网络/代理拦截：本地网络中断、VPN/代理服务器配置错误，或防火墙（系统/浏览器）拦截了请求端口，导致请求无法发送到目标服务器。
• URL/协议配置错误：请求URL拼写错误、HTTP/HTTPS协议不匹配（如HTTP页面发起HTTPS请求），或端口号与后端实际监听端口不符。
• SSL证书问题：HTTPS请求中，证书过期、无效或未被本地环境信任（如自签名证书未添加信任），Axios会拒绝建立连接。
• Axios配置异常：错误的baseURL、过短的timeout设置导致请求提前中断，或请求/响应拦截器中的代码逻辑错误终止了请求。
• 环境限制：浏览器安全策略阻止混合内容请求，或Node.js环境下的网络配置（如代理、DNS解析）异常。

排查步骤 #

1. 验证基础连通性：用curl命令或Postman直接请求目标URL，确认是否能正常获取响应，排除Axios本身的问题。
   示例：curl http://localhost:3000/api/data
2. 检查后端状态：查看两个项目对应的后端服务是否正常运行，端口是否处于监听状态（可通过netstat或lsof命令验证）。
3. 查看浏览器Network面板：打开浏览器开发者工具，查看请求的详细状态——是请求未发送、还是收到了4xx/5xx响应，同时检查Console面板是否有CORS相关报错。
4. 排除网络拦截：暂时关闭VPN、代理服务器，禁用本地防火墙，测试请求是否恢复正常。
5. 简化请求测试：编写最基础的Axios请求（去掉所有拦截器、自定义配置），比如：

   axios.get('http://your-target-url')
     .then(res => console.log(res))
     .catch(err => console.error(err));
   

   确认是否还会报错，以此排查是否是复杂配置导致的问题。
6. 检查SSL证书：如果是HTTPS请求，确认证书有效性，本地环境是否已添加信任（如浏览器手动导入证书、Node.js配置rejectUnauthorized: false临时测试）。

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