React使用axios发起POST请求返回400 Bad Request错误排查

400错误为请求参数不符合服务端校验规则导致，本次问题核心是前后端字段映射不匹配：

• 前端提交的POST请求体中，仅传递了imprint字段
• 服务端路由逻辑错误读取请求体的title字段，为BookInstance模型的imprint属性赋值，完全没有接收前端实际传递的imprint参数

绝大多数场景下BookInstance模型会为imprint字段设置必填校验，此时服务端拿到的赋值为undefined，创建MongoDB文档时触发校验失败，最终返回400状态码。

修改服务端路由的字段读取逻辑，与前端传递的字段名对齐即可，修正后的服务端代码如下：

router.post('/bookinstance/create', (request, response, next) => {
  const body = request.body;

  const bookInstance = new BookInstance({
    imprint: body.imprint, // 修复原错误写法：imprint: body.title
  });

  bookInstance
    .save()
    .then(savedBook => {
      response.json(savedBook.toJSON());
    })
    .catch(error => next(error));
});

如果修正字段后依然返回400，检查服务端是否在路由注册前配置了JSON请求体解析中间件，缺失该中间件会导致request.body值为undefined，同样会触发参数缺失错误，配置方式：

const express = require('express');
const app = express();

// 需在路由注册前添加，解析Content-Type为application/json的请求体
app.use(express.json());

// 之后再注册业务路由
app.use('/catalog', router);

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