Express读取req.body.order.name报undefined错误如何解决

• 核心原因是表单提交事件没有阻止默认行为：你给表单绑定了onsubmit回调，但没有调用e.preventDefault()，浏览器会触发原生表单提交逻辑，直接按application/x-www-form-urlencoded格式提交表单数据并跳转页面，你写的fetch自定义JSON请求要么根本没执行，要么发送的请求结构和你预期的完全不一致，后端收到的req.body里不存在order属性，访问req.body.order得到undefined，再读取name属性就会抛出类型错误。
• 次要问题：
  • 前端变量声明语法不严谨：let user = createUserInfo(form), 末尾误用逗号，若createUserInfo函数运行报错，会直接阻断后续请求构造逻辑。
  • 后端重复注册JSON解析中间件：同时使用express.json()和bodyparser.json()，虽然多数场景不会直接报错，但存在解析逻辑冲突的风险。
  • 后端路由未返回响应、前端fetch的then链未正确解析响应数据，会导致请求挂起、前端拿不到返回结果的问题，但不是触发本次报错的直接原因。

1. 在表单提交事件回调最开头添加阻止默认提交的代码：

document.querySelector('#checkout').onsubmit= async e =>{
    e.preventDefault() // 新增这行，阻断浏览器默认表单提交行为
    const form = new FormData(document.querySelector('#checkout'))
    // 后续原有逻辑

2. 修正前端变量声明语法，避免隐式报错阻断执行：

// 把原来末尾的逗号改成分号，若user变量暂时不用可以加注释避免未使用变量警告
let user = createUserInfo(form);

const order = {
   name: "Test_Name"
}

3. 清理后端重复的 body 解析中间件，Express 4.16+ 版本已经内置了和 body-parser 完全一致的解析能力，不需要额外引入 body-parser 包：

// 保留内置中间件即可，删除重复的bodyparser相关注册代码
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

4. 补全后端路由逻辑，记得给客户端返回响应避免请求挂起：

app.post('/checkout/create-order', async (req, res) => {
  console.log(req.body.order.name) // 此时可以正常打印出 Test_Name
  res.json({ code: 200, msg: 'success' })
})

5. （可选）修正前端fetch的响应处理逻辑，正确拿到后端返回的数据：

fetch("/checkout/create-order", {
  // 原有配置不变
}).then(res=>{
   if(!res.ok) throw new Error('请求异常')
   return res.json() // 解析响应JSON数据
}).then(data=>{
    console.log(data)
}).catch(err=>{
    console.error('请求失败', err)
})

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