如何调整HTML结构实现Logout的POST请求替代GET请求？

问题根源 #

<a>标签默认发起GET请求，但你后端仅配置了/logout的POST路由，两者请求方法不匹配，因此出现Cannot GET /logout报错。

具体修改步骤 #

• 修改视图中的Logout按钮代码：将<a>标签替换为表单，通过表单发起POST请求，同时保留原有样式布局：

<form action="/logout" method="POST" style="display: inline-block; margin: 0;">
  <button type="submit" role="button" class="btn btn-lg btn-dark right-button">Log out</button>
</form>

设置display: inline-block是为了让表单和页面其他元素保持同一行，避免破坏原有页面布局。

• 若项目启用CSRF保护：如果你的Express项目使用了csurf等CSRF防护中间件，需要在表单中添加隐藏的CSRF令牌字段，否则请求会被拦截：

<form action="/logout" method="POST" style="display: inline-block; margin: 0;">
  <input type="hidden" name="_csrf" value="<%= csrfToken %>">
  <button type="submit" role="button" class="btn btn-lg btn-dark right-button">Log out</button>
</form>

同时要在渲染该视图的GET路由中，把CSRF令牌传递给模板：

app.get('/your-target-route', (req, res) => {
  res.render('your-view-file', { csrfToken: req.csrfToken() });
});

• 确认后端POST路由配置：你当前的app.post('/logout')代码是正确的，无需修改，确保它已在Express实例中正确注册即可。

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