向Express API发起POST请求时req.body返回格式异常该如何解决

问题成因 #

该现象有两个核心原因：

• 你使用express.urlencoded中间件处理表单格式的POST参数时，没有开启extended: true配置，默认使用querystring库解析参数，不会将data[id]这类方括号格式的嵌套参数自动转为嵌套对象
• 默认解析出的对象原型为null，因此控制台会打印[Object: null prototype]标识

解决方案 #

方案1：修改中间件配置（最推荐） #

直接修改Express的urlencoded中间件配置，开启extended参数即可：

// 替换你原来的express.urlencoded()配置
app.use(express.urlencoded({ extended: true }));

配置后express会使用qs库解析参数，自动将方括号格式的参数转为嵌套对象，同时返回的是标准原型的普通JS对象，无需额外处理。

如果你的请求是JSON格式提交，还需要确保添加了JSON解析中间件，且请求头携带Content-Type: application/json：

app.use(express.json());

方案2：手动转换（兼容不能修改中间件的场景） #

如果项目中不能修改全局中间件配置，可以手动写转换函数处理req.body：

// 第一步：将null原型对象转为普通标准对象
const body = Object.assign({}, req.body);

// 第二步：解析方括号格式的键为嵌套对象
const parseNestedKeys = (obj) => {
  const result = {};
  for (const key in obj) {
    const value = obj[key];
    // 匹配类似 data[id] 格式的键
    const matches = key.match(/^(\w+)\[(\w+)\]$/);
    if (matches) {
      const [, parentKey, childKey] = matches;
      if (!result[parentKey]) result[parentKey] = {};
      // 可根据需求调整类型转换逻辑
      let parsedValue = value;
      if (value === 'true') parsedValue = true;
      if (value === 'false') parsedValue = false;
      if (!isNaN(Number(value))) parsedValue = Number(value);
      result[parentKey][childKey] = parsedValue;
    } else {
      result[key] = value;
    }
  }
  return result;
}

const parsedBody = parseNestedKeys(body);

转换结果示例 #

处理后最终得到的标准对象格式如下：

{
  type: 'report',
  data: {
    id: 123456,
    dateRequested: '2021-11-05',
    dateOfService: '2021-11-11',
    completed: true
  }
}

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