提交表单遇404及Handlebars权限错误，请求实现控制台打印表单数据

一、POST请求404问题排查与修复 #

出现404的核心原因是表单提交路径与后端路由未匹配，按以下步骤检查：

1. 核对表单与路由路径 #

确保HTML表单的method为POST，action路径与后端路由完全一致：

<!-- 示例表单 -->
<form method="POST" action="/admin/submit-form">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="submit">提交</button>
</form>

2. 检查路由定义 #

确认admin路由文件中已正确注册POST方法的对应路径：

// routes/admin.js
const express = require('express');
const router = express.Router();

// 路径需与表单action的后缀一致
router.post('/submit-form', (req, res) => {
  // 后续处理逻辑
});

module.exports = router;

3. 确认路由挂载 #

在app.js中确保路由已正确挂载，前缀需与表单action的前缀匹配：

// app.js
const adminRoutes = require('./routes/admin');
// 挂载前缀为/admin，对应表单action的/admin/submit-form
app.use('/admin', adminRoutes);

二、Handlebars非自有属性错误修复 #

这个错误是Handlebars v4.6.0+默认启用了preventExtensions选项，禁止访问原型链上的非自有属性，两种解决方式：

方式1：修改Handlebars配置 #

在app.js中配置引擎时关闭拦截：

const expressHandlebars = require('express-handlebars');

app.engine('handlebars', expressHandlebars({
  defaultLayout: 'main',
  preventExtensions: false // 允许访问非自有属性
}));
app.set('view engine', 'handlebars');

方式2：转换数据为自有属性 #

如果status属性来自原型链（比如数据库查询对象），将其转为普通对象：

// 示例：将数据库查询结果转为自有属性对象
const dbData = await User.findOne({ id: 1 });
const renderData = { ...dbData }; // 展开运算符创建新对象
res.render('admin/page', { status: renderData.status });

三、打印表单提交数据到控制台 #

需先配置表单解析中间件，再在路由中获取并打印数据：

1. 配置请求体解析中间件 #

在app.js中添加：

// 解析application/x-www-form-urlencoded格式的表单数据
app.use(express.urlencoded({ extended: true }));

2. 在路由中打印数据 #

修改admin路由的POST处理函数：

router.post('/submit-form', (req, res) => {
  // req.body即为表单提交的所有数据
  console.log('表单提交数据:', req.body);
  
  // 可选：添加响应逻辑，比如重定向回表单页
  res.redirect('/admin/form');
});

内容的提问来源于stack exchange，提问作者Abay sankar s