如何修复Cannot POST /index.html错误？Express计算器项目排查

问题现象 #

启动基于Express的计算器应用后，访问localhost:3000并点击提交按钮，Google Chrome浏览器提示Cannot POST /index.html，服务启动阶段无报错信息。

相关代码 #

index.html #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Calculator</h1>
    <form action="/" method="post">
        <input type="text" name="n1" placeholder="First Number">
        <input type="text" name="n2" placeholder="Second Number">
        <button type="submit" name="submit">Calculate</button>
    </form>
    
</body>
</html>

calculator.js #

const express = require("express");
const bodyParser = require("body-parser");

const app = express();
app.use(bodyParser.urlencoded({extended: true})); // 解析表单数据

app.get("/", function(req, res){
   res.sendFile(__dirname + "/index.html"); // 返回根路径页面
});

app.post("/", function(req, res){
    var num1 = Number(req.body.n1);
    var num2 = Number(req.body.n2);
    console.log(num1, num2); // 打印接收的数值
    var result = num1 + num2;
    res.send("The result of the calculation is " + result);
});

app.listen(3000, function(){
    console.log("Server started on port 3000.");
});

问题原因 #

错误核心是请求路径不匹配：

• 当访问localhost:3000时，服务通过app.get("/")返回index.html，此时浏览器地址栏为根路径；但如果用户直接访问localhost:3000/index.html，或者浏览器缓存了旧路径，表单提交时会把请求发送到/index.html，而服务端未配置该路径的POST路由，因此触发报错。

修复方案 #

方案1：规范访问路径 #

确保始终访问根路径localhost:3000，不要直接访问localhost:3000/index.html。如果之前访问过后者，清理浏览器缓存后重新访问根路径即可。

方案2：添加兼容路由（更严谨） #

为/index.html路径添加POST请求处理，避免用户误访问该路径时出错，可直接复用现有处理逻辑：

const express = require("express");
const bodyParser = require("body-parser");

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

// 定义通用计算处理函数
function handleCalculation(req, res) {
    var num1 = Number(req.body.n1);
    var num2 = Number(req.body.n2);
    console.log(num1, num2);
    var result = num1 + num2;
    res.send("计算结果是：" + result);
}

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

// 同时处理根路径和index.html路径的POST请求
app.post("/", handleCalculation);
app.post("/index.html", handleCalculation);

app.listen(3000, function(){
    console.log("Server started on port 3000.");
});

验证 #

修复后重启服务，访问localhost:3000，输入数字点击提交，页面会正常显示计算结果，控制台也会打印出接收的两个数值。

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