如何制作提交到Node.js Express的表单及req.body异常问题处理

1. 修复基础代码错误 #

你当前的路由定义存在语法错误：路由需要用Express实例app调用，而非响应对象res，同时回调函数缺少闭合符号，修正后基础结构如下：

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

2. 匹配路由与表单提交方法 #

表单默认使用POST方式提交数据，你当前仅定义了GET方法的/signin路由：

• GET请求的参数仅存在于URL的query字段中，不会携带请求体，直接打印req.body必然返回undefined
• 你需要拆分路由逻辑，新增POST路由专门处理表单提交：

// GET路由仅负责渲染登录页面
app.get("/signin", function(req, res) {
  res.render("signin")
})

// 新增POST路由接收表单提交数据
app.post("/signin", function(req, res) {
  console.log(req.body)
  res.end('提交完成')
})

同时确认前端表单的method属性配置正确：

<form action="/signin" method="post">
  <!-- 所有提交项必须设置name属性，否则不会被浏览器携带 -->
  <input name="username" type="text">
  <input name="password" type="password">
  <button type="submit">提交</button>
</form>

3. 正确配置请求体解析中间件 #

Express 4.16.0及以上版本已内置请求体解析能力，无需单独安装body-parser包，注意中间件必须配置在所有路由定义之前才会生效：

• 普通表单提交（Content-Type为application/x-www-form-urlencoded）添加如下配置：

app.use(express.urlencoded({ extended: true }))

• JSON格式提交（Content-Type为application/json）添加如下配置：

app.use(express.json())

4. 剩余场景排查 #

• 确认表单所有提交字段都设置了name属性，无name属性的字段不会被默认提交
• 若使用fetch/axios等异步提交，检查是否手动写错了Content-Type，或转换了不匹配的提交数据格式

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