Vue项目Axios POST请求部署后出现AxiosError网络错误求助

首先修正代码中的错误 #

你的请求头中添加了Access-Control-Allow-Origin: *，这是后端响应给前端的头字段，前端发起请求时添加这个完全无效，反而可能导致请求异常，先移除这个字段：

axios({
  method: "POST",
  url: `http://abcd.com:5000/start-recording?roomId=${this.roomId}`,
  // 移除无效的Access-Control-Allow-Origin请求头
})
.then(function (response) {
  console.log(response)
})
.catch(function (error) {
  console.log(error)
});

针对部署环境的ERR_NETWORK问题，逐一排查以下可能： #

1. 混合内容拦截（HTTPS前端 → HTTP API）

如果你的前端部署在HTTPS协议的服务器上，而API使用HTTP协议，浏览器会阻止这种混合内容请求（出于安全限制），但Postman不受浏览器规则约束，因此能正常调用。

• 解决：
  • 将API服务升级为HTTPS；
  • 或者在前端服务器配置反向代理，通过同域名的HTTPS路径转发请求到HTTP的API服务。

2. 服务器端口/网络访问限制

前端部署服务器可能无法访问API服务器的5000端口：

• API服务器的防火墙/云安全组未开放5000端口给前端服务器的IP；
• 服务器之间的网络策略拦截了该端口的通信。
  Postman从本地网络发起请求，不受服务器间网络限制，因此能正常访问。
• 解决：
  • 检查API服务器的防火墙/安全组规则，开放5000端口给前端服务器的IP；
  • 若允许，将API服务切换到80/443默认端口（这类端口通常不会被拦截）。

3. 生产环境未配置反向代理

本地开发时你可能通过vue.config.js的devServer.proxy配置解决了跨域，但部署到生产环境时未配置反向代理，导致浏览器的同源策略拦截请求。Postman不受同源策略限制，因此正常。

• 解决（以Nginx为例）：
  在Nginx配置中添加反向代理规则：

  location /api/ {
      proxy_pass http://abcd.com:5000/;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
  

  然后修改前端请求URL为相对路径：

  url: `/api/start-recording?roomId=${this.roomId}`
  

4. 后端CORS配置未覆盖生产域名

后端的CORS配置可能只允许了localhost等本地域名，未添加前端部署的生产域名，导致部署后跨域请求被拦截。

• 解决：
  检查后端CORS配置，将前端生产域名添加到允许列表，确保配置包含：
  • 允许前端域名的Origin；
  • 允许POST方法；
  • 正确返回Access-Control-Allow-Origin、Access-Control-Allow-Methods等响应头。

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