）触发 POST 请求
" />
html 的 `` 标签默认仅支持 get 请求，无法直接发起 post 请求。但可通过内联事件绑定 + javascript `fetch()` 发起异步 post 请求，实现点击链接即登出等需服务端状态变更的操作。
在 Web 开发中，许多后端路由（如 /logout）被设计为 POST 方法，以防止 CSRF 攻击、避免误刷新重提交，或配合 Express 中间件（如 req.logout()）正确清理会话。而原生 <a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"> 本质是导航行为，强制走 GET，因此不能直接用 <a> 触发 POST。
但无需放弃语义化链接体验——你完全可以用 <a> 标签作为视觉和交互载体，通过 JavaScript 拦截点击事件，以 fetch() 主动发起 POST 请求：
✅ 推荐实现方式（现代、简洁、无表单）
<a onclick="handleLogout()" role="button" class="btn btn-lg btn-primary left-button">Logout</a>
<script>
function handleLogout() {
fetch('/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
// 若使用 CSRF 保护（如 express.csrf），需携带 token：
// 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
},
// 可选：发送空体（部分框架要求 body 存在才识别为 POST）
body: JSON.stringify({})
})
.then(response => {
if (response.ok) {
window.location.href = '/login'; // 登出成功，跳转登录页
} else {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
})
.catch(err => {
console.error('Logout failed:', err);
alert('登出失败，请重试');
});
}
</script>⚠️ 注意事项
- 不要省略 body 或 headers：某些 Express 版本或中间件（如 body-parser）可能要求 POST 请求携带非空 body 或明确 Content-Type 才能解析；若后端不校验，可简化为 body: null。
- CSRF 防护：若应用启用了 CSRF 保护（如 csurf 或 express-session + 自定义 token），必须在请求头中附带有效 token，否则会被拒绝。
- 无障碍与用户体验：<a> 标签默认支持键盘聚焦与回车触发，但 onclick 会覆盖其原生语义。更佳实践是改用 <button type="button"> 并样式化为链接外观（语义更准确、兼容性更好）。
- 服务端响应处理：res.redirect('/') 在 fetch 中不会自动跳转（因是 AJAX），需在前端显式调用 window.location；也可让后端返回 JSON { redirect: '/' }，由前端统一处理。
✅ 替代方案对比
| 方案 | 优点 | 缺点 |
|---|---|---|
| <form method="POST"><button type="submit">Logout</button></form> | 无 JS 依赖、天然支持 POST、SEO 友好 | DOM 结构略冗余，需隐藏输入域（如 CSRF token） |
| <button onclick="fetch(https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c)">Logout</button> | 语义正确、无障碍友好、样式可控 | 需额外 CSS 模拟链接外观 |
综上，用 <a> 标签配合 fetch() 是可行且轻量的方案，但应优先考虑语义化与健壮性——在真实项目中，推荐将登出控件重构为 <button>，并确保 CSRF 安全与错误反馈机制完备。
