React使用axios发POST至Express时req.body为空对象、title字段获取为undefined

你遇到的req.body返回空对象、字段值取到undefined的核心原因是：Express默认不会自动解析POST请求携带的JSON格式内容。
Express从4.16版本开始虽然内置了请求体解析能力，但没有默认开启。没有解析逻辑的情况下，POST请求携带的内容会停留在原始的请求流对象上，不会被自动挂载到req.body属性上，最终就会出现req.body为空、字段读取为undefined的表现。

• 调整server.js的代码结构，把JSON解析中间件的挂载逻辑放在所有路由注册代码的最前面，参考代码示例：

  const express = require('express');
  const app = express();
  
  // 以下两行必须写在所有app.get/app.post等路由定义之前
  app.use(express.json()); // 解析前端传递的application/json格式请求体
  app.use(express.urlencoded({ extended: true })); // 兼容传统表单格式的请求体
  
  // 业务路由逻辑
  app.post("/new", (req, res) => {
    console.log(req.body);
  });
  

• 核对前端Axios的请求配置：Axios默认给POST请求传普通JS对象时，会自动把请求头的Content-Type设置为application/json，和上面的解析中间件完全匹配，不需要修改前端的传参逻辑。
• 检查跨域配置：如果前后端分端口运行（比如前端跑在3000端口，后端跑在5000端口），要确认是否正确配置了cors中间件。缺少cors配置时，跨域的POST请求会被浏览器拦截，甚至根本不会到达后端的业务接口。

1. 中间件的执行顺序是按代码书写从上到下匹配的，如果把app.use(express.json())写在app.post('/new')路由的后面，代码执行时会先进入业务路由，根本触发不到后面的解析逻辑，req.body依然是空对象。
2. 不要在前端手动把传参对象用JSON.stringify()转成字符串再传给Axios，这种情况会让Axios把Content-Type改成text/plain，后端的JSON解析中间件识别不到格式，依然拿不到参数。
3. 你前端代码里的.then(console.log(newPost))写法存在逻辑偏差：这行代码会在请求刚发出时就立刻执行console.log，不会等请求返回后执行回调，但这个写法不影响请求本身的参数传递，和后端拿不到值的问题无关。

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