React前端无法向Express后端API传递Body对象问题求助

使用Postman提交POST请求时，数据可正常存入MongoDB，但通过React前端发送POST请求至Express后端API时，后端的req.body始终为空。

React前端代码 #

const { name, email, message } = greeting;
const payload = {
  name: name,
  email: email,
  message: message,
};

console.log(payload);

fetch('http://localhost:8080/greetings', {
  method: 'POST',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    // 'Content-Type': 'application/x-www-form-urlencoded',
  },

  body: JSON.stringify(payload),
})
  .then(async function (res) {
    let response = await res.json();
    console.log(response);
  })
  .catch((err) => console.log(err));

Express后端代码 #

app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/greetings', async (req, res) => {
  const { name, email, message } = req.body;
  console.log(req.body);
  db();
  const saveDocument = new Document({
    name: name,
    email: email,
    message: message,
  });

  await saveDocument
    .save()
    .then((savedDoc) => {
      res.send({ status: 200, mes: 'success', request: req.body });
    })
    .catch((e) => console.log(e));
});

解决方案 #

1. 后端添加JSON格式请求体解析器 #

你的后端仅配置了application/x-www-form-urlencoded格式的解析中间件，但前端发送的是application/json格式请求，导致Express无法解析请求体，进而req.body为空。

在后端代码中添加JSON解析中间件：

// 若使用body-parser包
app.use(bodyParser.json());

// 若Express版本≥4.16.0，可直接用内置方法，无需额外安装body-parser
// app.use(express.json());

确保该代码放在app.post('/greetings', ...)之前、app.use(cors())之后。

2. 移除前端请求中的无效响应头 #

'Access-Control-Allow-Origin': '*'是后端需设置的响应头，前端请求时添加此头无意义，甚至可能干扰请求，建议移除：

headers: {
  'Content-Type': 'application/json',
  // 移除该行
  // 'Access-Control-Allow-Origin': '*',
},

完成上述操作后，后端即可正常解析前端发送的JSON请求体，req.body会包含正确数据，数据也能正常存入MongoDB。

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