React.js调用Node.js API时出现Axios Network Error报错如何解决

可能原因&对应解决方法 #

• 混合内容拦截（概率最高） #

如果你的React前端运行在https协议的地址（比如开启了开发环境HTTPS模式、或者部署到了HTTPS站点），直接请求http://localhost:6000的HTTP接口会被浏览器判定为不安全的混合内容，直接拦截请求，表现为Network Error。Postman和移动端没有混合内容拦截规则，所以可以正常访问。

解决方案：

• 开发环境下将前端切换为HTTP协议访问，或者将后端接口升级为HTTPS
• 临时测试可以在浏览器快捷方式的属性目标后加参数--allow-running-insecure-content，强制允许混合内容（仅测试用，不要用于生产环境）

• 自定义请求头异常 #

你代码中Axios.get传入了{headers}变量，若该变量包含未被CORS规则允许的自定义请求头、或者变量未定义导致请求头异常，会触发请求失败。

解决方案：

• 先删除headers参数测试请求是否正常：Axios.get("http://localhost:6000/api/v1/spesialisasi/")
• 若需要自定义头，可在后端CORS配置中显式声明允许的头：

app.use(cors({
  allowedHeaders: ['Content-Type', '你需要的自定义头字段名']
}))

• CORS中间件加载顺序错误 #

如果你的Express代码中，app.use(cors())写在了接口路由注册代码的后面，CORS配置不会对前面注册的路由生效，会导致跨域请求被拦截。

解决方案：将app.use(cors())移动到所有路由注册代码的最前面。

• 浏览器扩展拦截 #

广告拦截、代理、隐私安全类的浏览器扩展可能会拦截本地请求，导致请求被取消。

解决方案：禁用所有第三方扩展后再测试请求，或者使用无痕模式打开页面测试。

• 开发环境代理配置冲突 #

如果你在React项目的package.json中配置了proxy字段，或者配置了自定义的开发代理，可能会和直接写死的绝对路径请求冲突。

解决方案：开发环境建议使用代理转发请求，不要直接写绝对接口地址：

1. 在package.json中添加"proxy": "http://localhost:6000"
2. 请求改为相对路径：Axios.get("/api/v1/spesialisasi/")
   这种方式还能原生避免跨域问题。

• 异步写法冗余问题（不会直接触发网络错误，但建议修正） #

你同时使用了await和then/catch的异步写法属于冗余写法，建议调整为统一的写法：

export async function getMemberList() {
  try {
    const res = await Axios.get("http://localhost:6000/api/v1/spesialisasi/", {headers})
    console.log(res)
  } catch (error) {
    console.log(error)
  }
}

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