axios.post未传请求体参数：React前端传参至Node.js后端遇req.body未定义

核心原因及解决步骤 #

1. 后端必须配置JSON解析中间件 #

axios默认会将请求体序列化为JSON格式（Content-Type: application/json），后端必须用express.json()中间件解析这类请求体，否则req.body会返回undefined。如果你的Node.js后端基于Express框架，需在路由之前添加以下代码：

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

// 必须在路由前挂载该中间件
app.use(express.json());

// 之后挂载你的/compose路由
app.post("/compose", function(req,res){
  console.log(req.body.title);
  let newPost = new Post({
    title:req.body.title,
    content:req.body.content
  });

  newPost.save(function(err,result){
    if (err){
      console.log(err);
    }
    else{
      res.send(result);
    }
  });
})

2. 确认中间件挂载顺序 #

express.json()必须在所有需要解析req.body的路由之前挂载，否则路由处理时请求体还未被解析，req.body依然会是undefined。

3. 处理跨域问题（若存在） #

前端通常运行在localhost的其他端口（比如3000），后端在5000，属于跨域请求。Postman不受浏览器同源策略限制可正常请求，但前端可能因跨域导致请求被拦截或数据无法正确传递。需在后端配置CORS中间件：

• 先安装cors包：npm install cors
• 添加配置代码：

const cors = require('cors');
app.use(cors());

4. 前端请求写法无需额外包装 #

你尝试的{data: {...}}是错误写法，axios.post的第二个参数直接是请求体数据，不需要包裹在data字段里，你的原始前端写法是正确的：

axios.post('http://localhost:5000/compose',{
    title:  inputTitle,
    content: inputBody
})

验证步骤 #

1. 重启后端服务，确保中间件配置生效
2. 打开浏览器开发者工具的Network面板，确认请求的Content-Type为application/json，且Payload里包含正确的title和content数据
3. 查看后端控制台，确认req.body能正确打印出数据

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