Express+EJS项目提交表单出现Cannot POST错误的解决求助

核心问题 #

出现Cannot POST /square_volume/Cannot POST /square_area的根本原因：

• 路由未正确注册：错误使用typeof square_width != 'undefined'这类无效条件判断，该变量在路由外部未定义，导致两个计算路由完全未加载。
• 路由路径不匹配：app.all('square_volume')缺少开头斜杠，需改为app.all('/square_volume')，与表单的action="/square_volume"路径对应。
• 未配置表单解析中间件：POST请求的表单数据需要中间件解析，否则req.body会是undefined。
• GET路由路径冗余：.ejs后缀不应出现在路由路径中，比如/square_volume.ejs应改为/square_volume，保持路径简洁且与表单action对应。

修复步骤与修正代码 #

1. 安装并引入表单解析中间件 #

在项目根目录执行安装命令：

npm install body-parser

在app.js顶部添加中间件配置：

const bodyParser = require('body-parser');
// 解析表单URL编码数据
app.use(bodyParser.urlencoded({ extended: true }));

2. 修正路由配置 #

移除无效条件判断，正确注册路由，同时简化GET路由路径：

修正后的app.js关键代码：

// PAGES - 去掉路由路径中的.ejs后缀
app.get('/', (req, res) => {
    res.render('shapes_selection')
})
app.get('/square_selection', (req, res) => {
    res.render('square_selection')
})
app.get('/square_volume', (req, res) => {
    res.render('square_volume')
})
app.get('/square_area', (req, res) => {
    res.render('square_area')
})

// CALCULATIONS - 修正路由路径（添加斜杠），移除无效条件判断
app.all('/square_volume', (req, res) => {
    let form = req.body
    let data = {}
    if (form.square_width) {
        data = {
            data: true,
            square_width: form.square_width,
            square_length: form.square_length,
            square_height: form.square_height,
            square_volume: numberWithCommas(parseFloat(form.square_width) * parseFloat(form.square_length) * parseFloat(form.square_height))
        }
    }
    res.render('square_volume', data)
})

app.all('/square_area', (req, res) => {
    let form = req.body
    let data = {}
    if (form.square_side1) {
        data = {
            data: true,
            square_side1: form.square_side1,
            square_side2: form.square_side2,
            square_area: numberWithCommas(parseFloat(form.square_side1) * parseFloat(form.square_side2))
        }
    }
    res.render('square_area', data)
})

3. 确保辅助函数已定义 #

如果numberWithCommas是自定义函数，需在app.js中补充定义：

// 千分位格式化函数
function numberWithCommas(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

验证修复 #

重启服务器后，访问对应页面提交表单，POST请求将被正确处理，不会再出现路由找不到的错误。

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