如何在单个Express路由处理器中处理三种POST请求体类型？

嘿，我懂你的痛点——想用一个路由搞定纯字符串、JSON和FormData三种请求体，确实默认的Express中间件组合起来容易互相冲突，我给你一个亲测可行的方案：

核心思路 #

我们不依赖Express自带的express.json()或express.urlencoded()中间件，而是直接读取请求的原始数据流，再根据请求头里的Content-Type字段判断该怎么解析数据，这样就能在同一个路由里兼容三种类型的请求体了。

完整代码示例 #

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

// 自定义请求体解析中间件，兼容多种类型
const parseMultiTypeBody = (req, res, next) => {
  let rawBody = '';
  // 先读取原始请求数据流
  req.on('data', chunk => {
    rawBody += chunk.toString();
  });

  req.on('end', () => {
    const contentType = req.headers['content-type'];
    try {
      if (contentType?.includes('application/json')) {
        // 解析JSON格式请求体
        req.body = JSON.parse(rawBody);
        next();
      } else if (contentType?.includes('multipart/form-data')) {
        // 解析FormData，这里用formidable库简化操作（原生解析太繁琐）
        const { formidable } = require('formidable');
        const form = formidable({});
        form.parse(req, (err, fields, files) => {
          if (err) {
            next(err);
            return;
          }
          // 将表单字段和文件合并到req.body
          req.body = { ...fields, ...files };
          next();
        });
        // 由于formidable会自行处理数据流，这里提前return避免后续逻辑干扰
        return;
      } else {
        // 纯字符串类型直接赋值
        req.body = rawBody;
        next();
      }
    } catch (err) {
      res.status(400).json({ error: '请求体解析失败，请检查格式' });
    }
  });
};

// 将自定义中间件应用到目标路由
app.post('/', parseMultiTypeBody, (req, res) => {
  // 回显解析后的请求体内容
  res.json({ receivedContent: req.body });
});

app.listen(port, () => {
  console.log(`演示服务器运行在 http://localhost:${port}`);
});

关键注意事项 #

• 处理FormData需要先安装formidable库，执行npm install formidable即可，原生Node.js解析multipart/form-data类型的请求体非常麻烦，用这个库能省很多事。
• 发送请求时要注意匹配对应的Content-Type：
  • JSON请求需设置Content-Type: application/json
  • 纯字符串请求可设置Content-Type: text/plain
  • FormData请求浏览器会自动生成带boundary的Content-Type，无需手动指定

测试你的fetch示例 #

你可以用下面的代码分别测试三种请求类型：

// 测试JSON请求
const jsonHeaders = { 'Content-Type': 'application/json' };
fetch('http://localhost:5000/', { 
  method: 'POST', 
  body: JSON.stringify({ lab: 'fetch', status: 'fun' }), 
  headers: jsonHeaders 
})
.then(res => res.json())
.then(data => console.log('JSON请求结果:', data));

// 测试纯字符串请求
fetch('http://localhost:5000/', { 
  method: 'POST', 
  body: '这是一段纯字符串请求体', 
  headers: { 'Content-Type': 'text/plain' }
})
.then(res => res.json())
.then(data => console.log('纯字符串请求结果:', data));

// 测试FormData请求（可配合页面上的文件输入框使用）
const formData = new FormData();
formData.append('username', 'testUser');
formData.append('note', '这是FormData里的文本字段');
// formData.append('avatar', document.getElementById('avatarInput').files[0]); // 可选：添加文件
fetch('http://localhost:5000/', { 
  method: 'POST', 
  body: formData 
})
.then(res => res.json())
.then(data => console.log('FormData请求结果:', data));

这样就能用同一个POST路由完美处理三种不同类型的请求体啦！

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