Express Node.js更新分类数据点击提交返回Cannot POST错误如何解决

报错根本原因 #

你遇到的Cannot POST /halalMunchies/update-category/618632e3a5ad00fa5368ad5c错误，核心是请求方法和路由配置不匹配：

• 原生HTML表单仅支持GET、POST两种提交方式，你的表单代码中指定了method="post"，点击提交时会默认发送POST请求
• 你的路由配置中仅注册了PUT、GET方法对应的/update-category/:id处理逻辑，没有注册POST方法的路由，Express找不到对应处理逻辑就会返回该404错误
  你用Postman测试功能正常，是因为你在Postman中手动选择了PUT请求方法，刚好匹配到了你写的PUT路由，所以可以正常执行更新逻辑。

解决方案 #

方案1：新增POST路由（适配原生表单成本最低） #

直接在router.js中新增POST方法的路由即可，不需要修改其他业务代码：

// 新增POST路由适配表单提交
router.post('/update-category/:id', categoriesController.updateCategory);

方案2：用method-override中间件模拟PUT请求（符合RESTful规范） #

如果想要遵循RESTful接口规范，用PUT方法做更新操作，可以引入Express官方的method-override中间件处理：

1. 安装依赖

npm install method-override

2. 在项目入口文件（如app.js）中注册中间件

const methodOverride = require('method-override');
app.use(methodOverride('_method'));

3. 修改表单代码，添加隐藏参数指定请求方法为PUT

<form action='<%=`/halalMunchies/update-category/${category._id}`%>' method="post">
  <input type="hidden" name="_method" value="PUT">
  <!-- 其余表单代码保持不变 -->
</form>

该方案不需要修改现有路由配置，即可正常提交更新。

方案3：AJAX发送PUT请求 #

如果是前后端交互不需要页面刷新的场景，可以直接用fetch、axios等工具发送PUT请求，不需要修改路由和表单的method属性。

额外代码优化点 #

• findByIdAndUpdate的配置参数拼写错误：{ userFindAndModify: false }需要改为{ useFindAndModify: false }，否则配置不会生效
• 表单里的隐藏id字段<input type="hidden" name="id" value="" id="id">无实际作用，你的逻辑是从req.params.id中获取分类ID，该字段可以直接删除

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