You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Express.js后端接收请求时request.body始终为undefined的问题求助

解决Express中req.body始终为undefined的问题

我来帮你解决这个req.body始终为undefined的问题——这在Express开发里是个挺常见的坑,咱们一步步来排查和修复:

1. 先确认前端请求的Content-Type头是否正确

你的后端代码里已经用了express.json()中间件,但这个中间件只会解析Content-Type为application/json的请求。如果前端没设置这个请求头,或者设置错了(比如用了application/x-www-form-urlencoded),Express就不会自动解析请求体,自然就拿不到req.body。

举个前端Fetch的正确示例:

fetch('http://localhost:5000/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 这个头必须加!
  },
  body: JSON.stringify({ username: 'test', message: 'hello' }) // 必须把对象转成JSON字符串
})

如果用Axios的话会更省心,它默认会自动设置Content-Type并序列化数据:

axios.post('http://localhost:5000/', { username: 'test', message: 'hello' })

2. 检查发送的JSON格式是否有效

如果你的请求体JSON存在语法错误(比如字符串没加引号、逗号漏写或多写),express.json()会无法解析,此时req.body也会是undefined。你可以在前端用JSON.stringify()确保数据被正确序列化,或者用在线JSON校验工具检查你的数据格式是否合规。

3. 如果是用form-data/普通表单发送数据,需要对应中间件

如果前端是用form-data或者传统的表单提交,express.json()是处理不了的,这时候需要添加对应的解析中间件:

  • 处理form-data:需要用到multer包(先安装:npm install multer
    const multer = require('multer');
    const upload = multer(); // 不保存上传文件,只解析form-data字段
    
    // 在路由里使用这个中间件
    app.post('/', upload.none(), (req, res) => {
      console.log(req.body); // 现在可以拿到form-data里的字段了
      res.send('received');
    });
    
  • 处理普通表单(application/x-www-form-urlencoded):添加express.urlencoded()中间件
    // 放在express.json()后面也可以
    app.use(express.urlencoded({ extended: true }));
    

4. 确认中间件挂载顺序没问题

你的代码里已经在路由之前挂载了express.json()cors,这个顺序是对的,但要注意不要在这些中间件和路由之间添加其他会提前消费请求体的自定义中间件(比如有些中间件会调用req.destroy()或者提前读取req流)。

最后给你一个覆盖常见场景的完整后端示例:

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const upload = multer();

const app = express();

// 跨域中间件
app.use(cors());

// 解析JSON请求体
app.use(express.json());
// 解析普通表单请求体
app.use(express.urlencoded({ extended: true }));

// 处理JSON类型的POST请求
app.post('/json', (req, res) => {
  console.log('JSON请求体:', req.body);
  res.send('JSON data received');
});

// 处理form-data类型的POST请求
app.post('/form-data', upload.none(), (req, res) => {
  console.log('Form-data请求体:', req.body);
  res.send('Form-data received');
});

app.listen(5000, () => console.log('Server is running on port 5000'));

内容的提问来源于stack exchange,提问作者BinaryHawk

火山引擎 最新活动