在 Express.js 中，HTML 表单原生仅支持 GET 和 POST 方法，无法直接发送 PATCH 请求；若在 中试图通过 action="/posts/2" 触发 PATCH 路由，实际会以 POST 方式提交，导致 404 或 “Cannot POST /posts/2” 错误。正确做法是改用 POST 路由处理更新逻辑，并在服务端统一处理。

在 express.js 中，html 表单原生仅支持 get 和 post 方法，无法直接发送 patch 请求；若在 `

` 中试图通过 `action="/posts/2"` 触发 patch 路由，实际会以 post 方式提交，导致 404 或 “cannot post /posts/2” 错误。正确做法是改用 post 路由处理更新逻辑，并在服务端统一处理。

在构建基于 Express.js 的 CRUD 应用（如待办清单）时，一个高频陷阱是：误以为 HTML 表单能原生提交 PATCH/PUT/DELETE 请求。实际上，浏览器 <form></form> 元素的 method 属性仅接受 "GET" 或 "POST"（规范限定），即使你写 method="patch"，浏览器也会忽略并默认按 POST 发送——这正是你遇到 Cannot POST /posts/2 报错的根本原因。

✅ 正确实践：用 POST 模拟语义化更新

既然前端无法原生发出 PATCH，最简洁、兼容性最佳的方案是：

• 前端保持 method="POST"，但将动作语义体现在 URL 或隐藏字段中；
• 后端统一用 app.post('/posts/:id') 接收更新请求，而非依赖 app.patch()。

修改你的 edit.ejs，确保表单明确指向 POST 更新路由：

<form id="editTodo" action="/posts/<%= todo.id %>" method="POST">
  <input type="hidden" name="_method" value="PATCH"> <!-- 可选：用于后续中间件解析 -->
  <textarea name="content" rows="5"><%= todo.content %></textarea>
  <button type="submit" class="modify">Modify</button>
</form>

同时，删除原 app.patch('/posts/:id') 路由，改为 app.post('/posts/:id')：

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

// ✅ 替换原 patch 路由为 post
app.post('/posts/:id', (req, res) => {
  console.log("Handling POST update for ID:", req.params.id);
  const pId = parseInt(req.params.id);
  const post = todoList.find(todo => todo.id === pId);

  if (!post) {
    return res.status(404).send('Post not found');
  }

  // 更新内容（保留原 id，仅替换 content）
  post.content = req.body.content?.trim() || post.content;

  // ✅ 重定向到首页，触发重新渲染
  res.redirect('/');
});

⚠️ 注意事项：

• 不需要额外安装 method-override 中间件（除非你坚持用 _method=PATCH 并配合该库解析）；本方案直接利用 POST 语义，更轻量、更可靠。
• 确保 body-parser 已启用（你已配置 app.use(bodyParser.urlencoded({ extended: true }))），否则 req.body.content 将为 undefined。
• res.redirect('/') 必须放在逻辑末尾且无其他响应（如 res.send()），否则会报 Cannot set headers after they are sent 错误。

? 为什么重定向 / 是关键？

Express 中 res.redirect('/') 会触发一次新的 GET 请求，使 app.get('/') 路由重新执行，从而将最新状态的 todoList 渲染到 index.ejs。这是符合 RESTful 原则的“Post-Redirect-Get (PRG)”模式，有效防止表单重复提交和页面刷新丢失状态。

✅ 最终效果验证

1. 访问 /edit/2 → 编辑内容 → 点击 “Modify”；
2. 后端接收 POST，更新 todoList[1].content；
3. 302 重定向至 /；
4. 首页加载，显示已更新的待办项 —— 完全符合预期。

总结：不要被 HTTP 方法语义束缚前端实现。在传统表单场景下，用 POST 承载更新逻辑是标准、安全、广泛兼容的方案。理解浏览器限制 + 合理设计服务端路由，才能让 Express 应用稳健运行。