Express中POST表单提交返回{name: "undefined undefined"}的原因

问题描述 #

我正在学习Node.js Web开发课程，现有一个可输入姓名的HTML表单，路由为/name。已为GET请求配置URL参数处理逻辑，POST请求从请求体获取姓名，但提交表单时返回JSON响应{name: "undefined undefined"}，所有测试却已通过，请问该现象的原因是什么？

相关代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Hello HTML</title>
        <link rel="stylesheet" href="/public/style.css">
    </head>
    <body>
        <h1>Hello, HTML.</h1>
        <p>Do not use until Challenge #12</p>
     <form action="/name" method="post">
      <label>First Name :</label>
      <input type="text" name="first" value="John"><br>
      <label>Last Name :</label>
      <input type="text" name="last" value="Doe"><br><br>
      <input type="submit" value="Submit">
    </form> 
    </body>
</html>

myApp.js #

let express = require('express');
let app = express();
let bodyParser = require('body-parser');

// app.get("/", function(req, res) {
//   res.send('Hello Express');
// });

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

app.use('/', (req, res, next) => {
  console.log(req.method + " " + req.path + " - " + req.ip);
  next();
});

app.use('/public', express.static(__dirname + "/public"));

app.get('/:word/echo', (req, res) => {
  res.json({echo: req.params.word});
});

app.get('/', (req, res) => {
  res.sendFile(__dirname + "/views/index.html");
});

app.get('/now', (req, res, next) => {
  req.time = new Date().toString();
  next();
}, (req, res) => {
  res.json({time: req.time});
});

app.get('/json', (req, res) => {
  if (process.env.MESSAGE_STYLE === "uppercase") {
    res.json({"message": "HELLO JSON"});
  } else {
    res.json({"message": "Hello json"});
  }
});

app.route('/name')
  .get((req, res) => {
    res.json({name: req.query.first + " " + req.query.last});
  })
  .post((req, res) => {
    let string = req.body.first + " " + req.body.last;
    res.json({name: string});
  });

核心原因及解决方案 #

最可能的原因：Express版本兼容性冲突 #

从Express 4.16.0版本开始，框架已经内置了body-parser的urlencoded和json解析功能，无需手动安装第三方body-parser包。如果你的本地环境使用的是新版Express，但代码中仍手动引入了外部body-parser，两者可能产生冲突，导致请求体无法被正确解析，最终req.body.first和req.body.last返回undefined。

课程测试通过的原因是：测试环境大概率使用的是依赖第三方body-parser的旧版Express，或者测试脚本直接以标准格式发送请求，未触发兼容性问题。

其他可能性（概率较低） #

• 浏览器缓存了旧的请求配置，导致表单提交的请求格式未被解析；
• body-parser依赖未正确安装（但服务器未报错的话可以排除）。

解决方案 #

1. 改用Express内置的解析器：
   • 删除代码中的let bodyParser = require('body-parser');语句；
   • 将app.use(bodyParser.urlencoded({extended: false}));替换为：

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

2. 验证请求数据：
   打开浏览器开发者工具（F12）→ 切换到「Network」标签，提交表单后查看POST请求的「Form Data」，确认first和last参数是否存在且有有效值；
3. 强制刷新页面：
   按下Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）清除浏览器缓存，避免旧缓存导致的异常。

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