使用Fetch API向Express服务器发送POST请求后返回空JSON问题求助

嘿，我看你遇到了用Fetch发POST请求到Express服务器，结果后端只收到空JSON的问题，咱们一步步来解决：

首先先揪出你前端代码里的小笔误：document.querySelector('#second-fiel')这里最后少了个字母d，应该是#second-field，这会导致你拿不到第二个输入框的值，不过这还不是后端收不到数据的核心原因，重点看后端的配置。

最关键的问题：Express没配置JSON请求体解析中间件 #

Express默认不会自动解析JSON格式的请求体，所以如果没加对应的中间件，不管前端发什么JSON数据，后端的req.body都会是空对象{}。

修复步骤： #

1. 在你的Express服务器代码里，一定要加上express.json()中间件：

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

// 这行是核心！没有它，Express就不会解析JSON请求体
app.use(express.json());

// 然后是你的POST路由示例
app.post('/your-target-endpoint', (req, res) => {
  // 现在console.log就能看到前端传过来的数据了
  console.log('收到的请求数据：', req.body);
  // 把数据返回给前端验证
  res.json(req.body);
});

app.listen(3000, () => console.log('服务器跑在3000端口啦'));

2. 修正前端的拼写错误：
   把var secondField = document.querySelector('#second-fiel').value;改成：

var secondField = document.querySelector('#second-field').value;

3. 确保调用postData时传入正确的对象：
   比如你可以这样调用，把两个字段的数据传进去：

postData('/your-target-endpoint', { 
  firstValue: firstField, 
  secondValue: secondField 
})
.then(responseData => {
  console.log('服务器返回的数据：', responseData);
})
.catch(err => console.error('请求出错啦：', err));

额外要检查的点 #

• 你已经在Fetch的headers里设置了Content-Type: application/json，这部分是对的，不用改
• 打开浏览器的开发者工具（Network标签），查看POST请求的Payload，确认数据确实发送出去了
• 如果你的Express版本是4.16之前的老版本，那得用body-parser包来解析：

const bodyParser = require('body-parser');
app.use(bodyParser.json());

不过现在大部分人用的都是4.16+的版本，直接用express.json()就够啦。

内容的提问来源于stack exchange，提问作者Nikola Stojaković