使用NodeJS/Express和HTML表单无法获取POST数据的问题

1. 缺少POST表单数据解析中间件 #

Express框架默认不会自动解析表单提交的application/x-www-form-urlencoded类型请求体，这会导致req.body为undefined，进而触发读取属性时的报错。

解决方法：

• 确保已安装Express（未安装则执行npm install express）
• 在路由定义前添加表单数据解析中间件配置：

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

extended: true允许解析复杂嵌套结构的表单数据，适配大多数场景。

2. HTML表单的select标签属性错误 #

你将name="process-method"写在了<option>标签上，这不符合表单控件的规则——下拉框的name属性必须放在<select>标签上，否则提交时不会携带选中项的值。修正后的select代码：

<select name="process-method">
    <option value="msg">Message</option>
    <option value="trd">Thread</option>
    <option value="act">Account</option>
</select>

修正后的完整代码 #

NodeJS代码 #

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

// 配置表单数据解析中间件
app.use(express.urlencoded({ extended: true }));

server.start().then(res => {
   server.applyMiddleware({app})
   app.listen(8081, function () {   
      console.log("Running!");
   })
});


app.get('/', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html");
   console.log("200 - GET");
});


app.post('/archive_message', function (req, res) {
   // 正常获取表单提交的数据
   console.log("提交的URL:", req.body.urlToProcess);
   console.log("选中的处理方式:", req.body['process-method']);
   res.redirect("/");
})

HTML代码 #

<body>
    <h1>Hello, you are here</h1>
    <form action="/archive_message" method="post">
        Message URL: <input type="text" name="urlToProcess">
        <select name="process-method">
            <option value="msg">Message</option>
            <option value="trd">Thread</option>
            <option value="act">Account</option>
        </select>
        <input type = "submit" value = "Submit">
    </form>
</body>

验证方式 #

启动服务后提交表单，控制台会打印出输入的URL和选中的处理方式，不再出现Cannot read properties of undefined的错误。

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