React通过Axios向Express提交JSON时被自动添加外层大括号问题

这种嵌套大括号的问题我之前踩过坑！大概率是你在React端提交请求的时候，对JSON数据的处理多做了一步，导致被双重包裹了。咱们一步步排查解决：

情况1：错误地将JSON字符串包裹在对象中提交 #

很多时候是拿到输入框里的JSON字符串后，不小心把它放到了一个新对象里发送，比如：

// 输入框内容是：{"user":"emp","company":"acme"}
const inputJsonStr = document.getElementById('jsonInput').value;
// ❌ 错误操作：把字符串塞进了对象里
axios.post('/api/submit', { inputJsonStr });

这时候Axios会自动把这个对象序列化为JSON，发送的内容就变成了{"inputJsonStr":"{\"user\":\"emp\",\"company\":\"acme\"}"}，Express解析后req.body就是这个外层带对象的结构，看起来就像多了一层大括号。

解决办法：
有两种正确的处理方式：

1. 直接发送JSON字符串，同时指定Content-Type为application/json：

const inputJsonStr = document.getElementById('jsonInput').value;
axios.post('/api/submit', inputJsonStr, {
  headers: {
    'Content-Type': 'application/json'
  }
});

2. 先把JSON字符串解析为JS对象，再直接传对象（Axios会自动帮你序列化并设置正确的请求头）：

const inputJsonStr = document.getElementById('jsonInput').value;
const parsedData = JSON.parse(inputJsonStr); // 解析成JS对象
axios.post('/api/submit', parsedData);

情况2：Express端中间件配置异常 #

如果你的Express没有正确配置JSON解析中间件，也可能导致请求体解析出问题。确保在路由配置之前添加这一行：

app.use(express.json()); // 用于解析application/json格式的请求体

注意不要同时混用旧版的body-parser中间件，避免解析逻辑冲突。

情况3：对JSON字符串做了双重序列化 #

要是你不小心执行了两次JSON.stringify，也会出现类似问题：

const inputJsonStr = document.getElementById('jsonInput').value;
// ❌ 错误操作：已经是JSON字符串了，又序列化一次
const doubleSerialized = JSON.stringify(inputJsonStr);
axios.post('/api/submit', doubleSerialized);

这时候发送的是转义后的字符串，Express解析后req.body是这个字符串，如果你再对它做JSON.parse，得到的还是原来的JSON字符串，再解析一次才是目标对象，相当于多了一层嵌套。

解决办法：只做一次序列化操作，或者直接传解析后的JS对象让Axios处理序列化。

最后建议你在Express路由里先打印一下req.body的实际结构，方便快速定位问题：

app.post('/api/submit', (req, res) => {
  console.log('实际收到的请求体:', req.body);
  // 根据打印结果提取数据即可
});

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