Express.JS报错：Cannot post /login或跳转至/login?问题求助

问题现象 #

点击提交按钮后，未按预期跳转至/首页，出现两种异常情况：

• Express抛出Cannot POST /login错误
• 页面跳转至/login?路径

问题根源分析 #

前端代码（index2.ejs）问题 #

1. localStorage API调用错误：localStorage.get('user')应为localStorage.getItem('user')，该错误会导致JS执行中断，表单提交的默认行为未被阻止，触发浏览器原生POST提交。
2. 无跳转逻辑：submit事件仅完成localStorage数据存储，未添加页面跳转代码，无法实现跳转到首页的需求。
3. 冗余属性与依赖缺失：submit按钮的formmethod="post"属性多余（表单已指定method="post"）；若页面未引入jQuery，$('#login').submit事件绑定完全失效，表单直接默认提交。
4. 表单未指定action：未设置action时，表单默认提交到当前页面路径，若当前路径为/login，后端无对应POST路由则会报错。

后端代码（index2.js）问题 #

• 路由冲突：两个router.get("/")路由定义，后一个会覆盖前一个，导致index2.ejs的路由永远无法生效，只会渲染index.ejs。

修复方案 #

前端代码修改（index2.ejs） #

<html>
  <%- include('partials/header.ejs'); -%>
  <!-- 确保jQuery已引入，可在header中添加 -->
  <!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> -->
  <body>
    <div id="top-block">
          <form id="login" method="post">
            <label>Create A Display Name...</label>
              <input type="text" id="name">
              <br><br>
              <label>Create A Profile Picture...</label>
              <input id="pfp" type="text"> 
              <br><br>
              <label>Create A Bio...</label>
              <input id="bio" type="text">
              <br><br>
              <input type="submit">
              <button onclick="window.location = '/'">Back to main page</button>
          </form>

        <script>
          // 修正localStorage API调用
          var user = localStorage.getItem('user')

          var base = "";
function getBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file)
   reader.onloadend = function() {
     globalThis.base = reader.result.toString()
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
  }   

          $('#login').submit(function (e) {
            e.preventDefault(); // 阻止默认表单提交
            localStorage.setItem("uname", $('#name').val())
            localStorage.setItem("pfp", $('#pfp').val())
            localStorage.setItem("bio", $('#bio').val())

            localStorage.setItem("url", '/profile?pfp=' + $('#pfp').val() + '&disName=' + $('#name').val() + '&genName=' + user + '&bio=' + $('#bio').val())
            
            // 添加跳转逻辑，跳转到首页
            window.location.href = '/';
          })
        </script>
  </body>
</html>

后端代码修改（index2.js） #

const express = require("express");
const router = express.Router();

// 修正路由路径，将index2.ejs绑定到/login路径
router.get("/login", function (req, res) {
    res.render("index2.ejs");
});

// 根路径渲染首页index.ejs
router.get("/", function (req, res) {
    res.render("index.ejs");
});

module.exports = router;

额外说明 #

• 若不想依赖jQuery，可改用原生JS绑定submit事件：

  document.getElementById('login').addEventListener('submit', function(e) {
    e.preventDefault();
    // 后续数据存储与跳转逻辑...
  });
  

• 若需后端处理表单数据，可添加对应POST路由并实现业务逻辑，再通过res.redirect("/")完成跳转。

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