Axios GET请求直连正常但调用报Network Error的排查方案

• 无效的CORS请求头配置：Access-Control-*系列头是服务端返回的响应头，用于告知浏览器跨域访问权限，客户端请求携带这类头完全无法绕过CORS限制。你配置的Access-Control-Allow-Origin: *与Access-Control-Allow-Credentials: true本身违反CORS规范（带凭证的跨域请求不允许使用通配符来源），会直接触发浏览器安全拦截，抛出Network Error。
• 配置项层级错误：responseType是axios的顶层配置，用于指定响应格式，不属于请求头范畴；crossorigin是HTML媒体标签的属性，axios请求无对应配置项，这类无效请求头会增加浏览器拦截概率。
• axios版本兼容问题：你使用的axios 0.21.1版本存在Safari兼容bug，对被浏览器拦截的请求错误捕获逻辑有缺陷，会把所有拦截错误都统一报为Network Error，不会返回具体的错误原因。
• Safari的报错特性：Safari对CORS校验失败的请求不会暴露具体错误原因，只会统一返回Network Error，和Chrome的报错逻辑不同，进一步增加了定位难度。
• 地址栏访问的误导性：直接在地址栏输入URL访问属于浏览器顶层导航请求，不受CORS规则限制，能成功获取响应不代表该API支持前端跨域调用。

• 第一步：清理所有自定义的无效请求头，把responseType移到axios的顶层配置中，更换为最新稳定版的axios，排除版本兼容问题
• 第二步：打开开发者工具的网络面板，查看目标请求的响应头：如果没有Access-Control-Allow-Origin字段，说明API本身未开放前端跨域权限，前端无任何方式可以绕过，需要通过自有后端代理转发请求
• 第三步：排除Codepen环境拦截：Codepen的预览域为第三方调试域，部分公共API会屏蔽这类环境的跨域请求，可以更换为本地静态HTML文件测试，确认是否为测试环境限制
• 额外注意：API密钥直接写在前端代码中会完全暴露，生产场景下绝对禁止这么使用，必须通过后端代理转发，避免密钥泄露

axios({
  method: "get",
  url: "https://politicsandwar.com/api/tradeprice/?resource=steel&key=你的API密钥",
  responseType: "json",
  timeout: 10000
}).then(res => {
  console.log(res.data);
}).catch(err => {
  // 打印详细错误信息，方便定位具体问题
  console.log('错误配置：', err.config);
  console.log('错误响应：', err.response);
});

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