Node服务端接收axios POST数据时打印req.body为undefined

• 服务端未配置对应格式的请求体解析中间件，Express框架默认不会解析POST请求的body内容，所以直接打印req.body会返回undefined
• 客户端传参写法错误：当前代码将formData包裹在额外对象中传递，Axios会默认将其序列化为JSON格式发送，不符合FormData的提交规范

1. 修正客户端传参逻辑 #

直接将FormData实例作为请求体传入，不要在外层包裹对象，Axios会自动识别FormData格式并设置正确的Content-Type请求头：

const handleSubmit = async (e) => {
    e.preventDefault()
    try{
      // 移除formData外层的{}包裹
      const response = await axios.post('http://localhost:8000/send', formData)
      console.log(response)
    } catch(error){
      console.log(error)
    }
}

2. 配置服务端请求体解析中间件 #

根据你传输的数据格式选择对应配置，所有中间件必须写在路由定义之前才会生效：

• 如果传输的是普通JSON、键值对格式数据，没有文件上传需求，直接使用Express内置中间件即可：

// 加在所有app.post、app.get等路由定义之前
app.use(express.json()) // 解析JSON格式请求体
app.use(express.urlencoded({ extended: true })) // 解析表单urlencoded格式请求体

// 原有路由无需修改
app.post('/send', async (req, res) => {
    console.log(req.body)
    res.send("ok")
})

• 如果传输的FormData包含文件上传，属于multipart/form-data格式，Express内置中间件无法解析，需要使用multer包处理：
  1. 安装依赖：执行命令 npm install multer
  2. 添加服务端配置：

const multer = require('multer')
// 不需要本地存储文件可以替换为const upload = multer({ storage: multer.memoryStorage() })
const upload = multer({ dest: 'uploads/' })

// 路由添加对应中间件：无文件上传用upload.none()，单文件上传用upload.single('对应文件字段名')
app.post('/send', upload.none(), async (req, res) => {
    console.log(req.body)
    res.send("ok")
})

额外注意 #

如果请求出现跨域报错，安装cors依赖后添加app.use(require('cors')())配置即可解决。

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