使用axios向localhost发POST请求出现Network Error求解决

1. 优先解决跨域问题（最高概率触发Network Error） #

你当前React前端默认运行在3000端口，后端服务运行在9000端口，不同端口符合同源策略拦截规则，浏览器会直接拦截跨域请求导致报错。
两种解决方式二选一即可：

• 后端配置CORS
  1. 后端项目目录执行安装命令：npm install cors
  2. 修改后端Express代码，引入并启用cors：

  var express=require('express');
  var cors = require('cors');
  var app=express();
  app.use(cors()); // 新增这行，要放在路由定义之前
  app.use(express.json());
  app.post('/api', function(req,res){
    res.json(req.body);
  })
  app.listen(9000, ()=> console.log("后端服务已启动，端口9000"));
  

• 前端配置代理（React项目专属）
  在React项目的package.json文件中新增配置项："proxy": "http://localhost:9000"，之后修改前端请求的url为相对路径var url = "/api"即可。

2. 修复前端请求触发逻辑的错误 #

你当前直接在render()方法的返回模板中调用this.sendData()，会导致组件每次渲染都会重复触发请求，属于逻辑错误：

• 如果需要页面加载完成后自动发请求，把{this.sendData()}删掉，在组件中新增生命周期方法：

  componentDidMount() {
    this.sendData();
  }
  

• 如果需要用户操作触发请求，给按钮绑定点击事件即可：

  render() { 
    return ( 
      <div>
        <form>
        <input type="text" name="data"/>
        <button type="button" onClick={this.sendData}>发送数据</button>
        </form>
      </div>
    );
  }
  

3. 排查后端服务可用性 #

先验证后端接口本身是否正常运行：

• 检查后端控制台无报错，确认9000端口没有被其他程序占用
• 用接口测试工具（Postman、Apifox等）或者curl命令测试POST http://localhost:9000/api，请求体为{"code":"hello world"}，如果能正常返回对应数据说明后端无问题。

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