基于Express的加法计算器提交表单时出现404 Cannot POST /index.html错误

核心问题根源：你提交表单触发404的本质是前端表单提交的请求路径，和后端注册的POST处理路由完全不匹配。
这也是为什么页面能正常加载的原因：你打开页面时走的是GET请求打向根路径 /，刚好和后端写的GET / 路由匹配；但提交表单时，请求的目标路径变了，和后端的路由对不上。
结合你贴的两段代码就能直接定位问题：

1. 前端index.html里的表单配置：

   <form action="index.html" method="post">
   

   这行代码会让浏览器在提交表单时，向服务端发送目标路径为 /index.html 的POST请求。
2. 后端calculator.js里的路由配置：
   你只给根路径 / 写了两个处理逻辑：
   • 匹配GET /：返回index.html页面
   • 匹配POST /：处理加法计算并返回结果
     后端压根没有给/index.html这个路径注册任何POST处理逻辑，所以当服务端收到打向/index.html的POST请求时，自然会返回Cannot POST /index.html的404错误。

两种可直接落地的修改方案，二选一即可 #

• 方案1（最贴合现有后端逻辑的改法）：修改前端表单的提交地址
  把index.html里表单的action属性值，从index.html改成根路径 /，让提交请求直接打向你已经写好处理逻辑的POST / 接口即可：

  <form action="/" method="post">
  

• 方案2（不想动前端代码的改法）：修改后端路由的匹配路径
  把calculator.js里的POST路由注册路径，从原来的/改成/index.html，让后端能匹配到前端发过来的对应路径的POST请求，原有的计算逻辑不需要改动：

  app.post("/index.html", function(req, res) {
    var num1 = Number(req.body.num1);
    var num2 = Number(req.body.num2);
    var result = num1 + num2;
    res.send("The result is: " + result);
  })
  

验证流程 #

改完代码后先重启Express服务，再刷新浏览器页面重新提交表单，就能正常触发加法计算、看到返回结果了。

额外优化提示：目前的两个输入框没有做输入校验，如果用户填入非数字内容，最后计算结果会返回NaN，后续可以补个简单的输入类型限制，提升使用体验。

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