如何让链接标签（a标签）发起POST请求？

你当前的登出链接是<a>标签，默认会发送GET请求，但后端接口仅接收POST请求——不想用<form>标签的话，可以通过JavaScript监听点击事件，手动发送POST请求来实现需求。

方案：原生JavaScript绑定点击事件 #

1. 修改视图中的<a>标签 #

给链接添加点击事件处理函数：

<a href="/logout" role="button" class="btn btn-lg btn-primary left-button" onclick="handleLogout(event)">Logout</a>

2. 添加JavaScript处理逻辑 #

在页面的<script>标签或单独的JS文件中加入以下代码：

function handleLogout(event) {
  // 阻止<a>标签默认的GET跳转行为
  event.preventDefault();

  // 发送POST请求到登出接口
  fetch('/logout', {
    method: 'POST',
    credentials: 'include', // 携带会话Cookie，确保后端识别当前用户
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
      // 若项目启用CSRF防护，需添加CSRF令牌头，例如：
      // 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
    }
  })
  .then(response => {
    if (response.ok) {
      // 请求成功后跳转到首页
      window.location.href = '/';
    } else {
      console.error('登出请求失败');
    }
  })
  .catch(error => {
    console.error('登出过程出错:', error);
  });
}

备选：事件委托方式（更灵活） #

如果不想直接在标签上写onclick，可以用事件委托绑定监听：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const logoutBtn = document.querySelector('.left-button');
  logoutBtn.addEventListener('click', function(event) {
    event.preventDefault();
    
    fetch('/logout', {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
        // 按需添加CSRF令牌
      }
    })
    .then(res => res.ok ? window.location.href = '/' : console.error('登出失败'))
    .catch(err => console.error(err));
  });
});

关键注意事项 #

• 阻止默认行为：必须调用event.preventDefault()，否则<a>标签会直接发送GET请求到/logout，后端仅处理POST会返回404或405错误。
• 会话Cookie：设置credentials: 'include'确保请求携带用户会话Cookie，这样req.logout()才能正确销毁当前用户的会话。
• CSRF防护：如果你的Express项目启用了CSRF中间件（如csurf），必须在请求头中带上CSRF令牌，否则后端会拒绝POST请求。通常做法是在页面头部添加<meta name="csrf-token" content="你的令牌值">，然后在请求头中引用该值。

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