React向Express发送POST请求时服务端接收为空对象如何解决

React 客户端应用向 Express 服务端发送对象数据，提交后控制台无任何报错，但服务端仅能获取到空对象，无法接收上传的有效数据。

客户端代码 #

const url = `http://localhost:5000/addUser`;
fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(userData)
}).then(res => console.log(res))

服务端代码 #

const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
require("dotenv").config()
const port = process.env.PORT || 5000;
const { MongoClient } = require('mongodb');

const app = express()
app.use(cors())
app.use(express.json())
app.use(bodyParser.json({
limit: '50mb',
parameterLimit: 100000
}))
app.post('/addUser', (req, res) =>{
const newUser = req.body;
console.log('added new user', newUser)
})

服务端 package.json 配置 #

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
 "start": "nodemon index.js",
 "test": "echo \"Error: no test specified\" && exit 1"
},
 "author": "",
 "license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"mongodb": "^3.6.10",
"nodemon": "^2.0.10"
 }
}

问题原因与修复方案 #

• 重复注册 JSON 解析中间件：Express 4.16+ 版本已经内置了express.json()，功能与第三方body-parser的JSON解析能力完全一致，同时注册两个JSON解析中间件会导致请求体被提前消费，后续中间件无法正常读取请求数据。
  修复方式：删除body-parser相关引入和配置，直接将参数写到内置的express.json()中即可：

  // 删除这两行
  // const bodyParser = require('body-parser')
  // app.use(bodyParser.json({ limit: '50mb', parameterLimit: 100000 }))
  
  // 调整原有express.json配置
  app.use(express.json({ limit: '50mb', parameterLimit: 100000 }))
  

• 服务端接口未返回响应：接口逻辑执行完成后没有给客户端返回任何响应，会导致客户端请求一直处于 pending 状态，完整的请求流程未结束，数据提交逻辑可能异常终止。
  修复方式：在接口逻辑最后添加响应返回：

  app.post('/addUser', (req, res) =>{
    const newUser = req.body;
    console.log('added new user', newUser)
    // 新增返回响应
    res.json({ success: true, data: newUser })
  })
  

• 客户端未正确处理fetch响应：fetch返回的是Response流对象，需要调用json()/text()等方法消费流之后，才算完成完整的请求交互流程。
  修复方式：调整客户端回调逻辑：

  fetch(url, {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify(userData)
  }).then(res => res.json())
  .then(data => console.log('请求结果', data))
  

• 额外排查点：提交前打印userData确认该对象本身不为空，排除前端数据未正确赋值的问题。

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