Node.js中app.post()方法失效问题排查求助

问题描述 #

在Node.js项目中，app.get()可正常运行，但app.post()方法无法工作，无法定位错误。相关代码如下：

HTML文件代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<h1><strong>Calculator</strong></h1>
 <form action="/" method="post">   
 <input type="text" name="num1" placeholder="First Number">
 <input type="text" name="num2" placeholder="Second Number">
 <button type="submit" class="btn btn-outline-dark" name="submit">Calculate</button>
 </form>
</body>
</html>

Node.js代码片段 #

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

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));

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

app.post('/', (req, res) => {
    console.log(req.body.num1);
    res.send("Thanks for posting");
});

app.listen('3000', () => console.log('working properly'));

解决步骤 #

按优先级排查并修复以下问题：

1. 替换body-parser为Express内置中间件
   从Express 4.16.0版本开始，框架已内置express.urlencoded()，无需单独依赖body-parser包。将原body-parser相关代码替换为：

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

若坚持使用body-parser，先确认已执行npm install body-parser完成依赖安装。

2. 修复HTML的viewport语法错误
   HTML中viewport标签存在语法错误：width= , 应改为width=device-width,，错误语法可能干扰表单提交行为。修正后代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. 验证请求是否到达后端
   在app.post回调开头添加日志，确认请求是否被接收：

app.post('/', (req, res) => {
    console.log("POST请求已接收");
    console.log(req.body);
    res.send("Thanks for posting");
});

若控制台未打印"POST请求已接收"，需检查前端页面路径是否正确，或服务器是否正常监听3000端口。

4. 添加表单输入值校验
   确保提交表单时输入框已填写内容，空值会导致req.body.num1打印undefined。可在代码中添加空值判断：

app.post('/', (req, res) => {
    const num1 = req.body.num1 || "未输入";
    const num2 = req.body.num2 || "未输入";
    console.log(`num1: ${num1}, num2: ${num2}`);
    res.send(`Thanks for posting, num1: ${num1}, num2: ${num2}`);
});

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