Express中app.post路由命名后POST请求提交报错求助

问题描述 #

在Express中定义app.post("/today")路由处理表单提交时，提交后服务器报错"cannot submit / Post"，无法正常完成提交操作。

原代码 #

index.js #

import express from "express";
import bodyParser from "body-parser";
const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));

let taskList = [];
let viewTaskList = ["Task 1","Task 2","Task 3","Task 4"];

app.get("/", (req, res) => {
    
    res.render("index.ejs", {
        views: viewTaskList
    });  

});

app.post("/today", (req, res) => {
    
    let itemName = req.body.task;
    let button = req.body.add;
    button = true;
    if (button) {
        taskList.push(itemName);   
    }

    res.render("index.ejs", {
        task: taskList,
        views: viewTaskList
    }); 

});


app.listen(port, () => {
    console.log(`Listening on port ${port}`);
  });

index.ejs #

<form action="/today" method="post">
    <input type="text" name="task" placeholder="New Item">
    <button type="submit" value="Add">+</button>
</form>

错误原因 #

1. 未遵循Post/Redirect/Get模式：POST请求处理完成后直接渲染页面，导致浏览器停留在/today路径，刷新会重复提交POST请求，且直接访问/today的GET请求因无对应路由会返回404，引发报错。
2. 冗余的按钮判断逻辑：按钮未设置name属性，req.body.add始终为undefined，代码中强行赋值button = true属于无效逻辑。
3. 变量传递不一致：GET路由仅传递views变量，POST路由传递task和views，可能导致EJS模板因变量缺失报错。

修复方案 #

1. 采用Post/Redirect/Get模式重定向 #

处理完POST请求后，重定向到GET /路由，避免重复提交和路由问题，同时将taskList作为全局变量保持数据。

2. 简化表单提交逻辑 #

去掉冗余的按钮判断，只要表单提交且输入内容不为空，就添加任务。

3. 统一模板变量传递 #

在GET路由中也传递task变量，确保模板渲染时变量始终存在。

修改后的代码 #

index.js #

import express from "express";
import bodyParser from "body-parser";
const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));

let taskList = [];
let viewTaskList = ["Task 1","Task 2","Task 3","Task 4"];

app.get("/", (req, res) => {
    // 统一传递task变量，避免模板报错
    res.render("index.ejs", {
        views: viewTaskList,
        task: taskList
    });  
});

app.post("/today", (req, res) => {
    const itemName = req.body.task;
    // 仅当输入内容不为空时添加任务
    if (itemName) {
        taskList.push(itemName);
    }
    // 重定向到GET /路由，遵循Post/Redirect/Get模式
    res.redirect("/");
});

app.listen(port, () => {
    console.log(`Listening on port ${port}`);
});

index.ejs（若有任务列表渲染逻辑，可参考以下示例） #

<form action="/today" method="post">
    <input type="text" name="task" placeholder="New Item">
    <button type="submit" value="Add">+</button>
</form>
<!-- 渲染任务列表 -->
<ul>
    <% if (task && task.length > 0) { %>
        <% task.forEach(item => { %>
            <li><%= item %></li>
        <% }) %>
    <% } %>
</ul>

说明 #

• 重定向后浏览器地址会回到/，避免了刷新重复提交POST的问题。
• 统一传递变量确保EJS模板不会因变量缺失报错。
• 增加输入内容校验，避免添加空任务。

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