server.js无法对接前端，POST /api/person/add返回400错误如何解决？

1. 端口与代理配置错误 #

后端服务最终监听的是4000端口，前端代码备注的代理地址为4747，而报错的请求是发到了React默认开发服务端口3000，三者端口完全不匹配导致请求无法正确到达后端。
修复方式：

• 统一端口配置：要么将后端app.listen的端口改为前端代理配置的4747，要么将前端代理目标端口改为4000
• 确认代理生效：如果使用create-react-app创建项目，需要在package.json中添加配置 "proxy": "http://localhost:4000"（端口和后端保持一致）

2. 跨域限制问题 #

后端代码中的cors中间件处于注释状态，前后端端口不同时会触发跨域资源共享限制，导致请求异常。
修复方式：

• 先安装cors依赖：npm install cors
• 取消后端代码中// const cors = require("cors");和// app.use(cors());两行的注释

3. 数据类型校验错误 #

PersonSchema中定义age字段为Number类型，但前端input输入的age是字符串格式，直接提交会触发Mongoose的类型校验失败，返回400错误。
修复方式：
前端提交数据前将age转换为数字类型，修改addPerson调用逻辑：

addPerson({...person, age: Number(person.age)})

4. 输入框提前清空问题 #

当前点击添加按钮后，无论POST请求是否成功，都会同步执行setPerson(defaultPerson)清空输入内容，这就是点击后输入内容直接消失的原因。
修复方式：
将清空逻辑移到请求成功的回调中，仅当接口调用成功后再清空输入框：

// 修改按钮点击逻辑
<button
  onClick={() => {
    if (person.forename && person.age) {
      addPerson({...person, age: Number(person.age)})
        .then(() => setPerson(defaultPerson))
    }
  }}
>
  Add
</button>

// 修改addPerson函数返回Promise
function addPerson(newPerson) {
  return axios.post("/api/person/add", newPerson)
    .then((res) => setPeople([...people, res.data]))
    .catch((err) => console.log(err));
}

内容的提问来源于stack exchange，提问作者Sai Kyaw Lin