浏览器窗口关闭时调用Logout API失效问题处理方案

当前使用的Identity Server会生成HTTPOnly Cookies，这类Cookie无法通过客户端JavaScript访问。当用户未主动执行登出操作直接关闭浏览器时，会因这类Cookie残留引发业务异常，需要实现浏览器关闭时自动删除对应Cookie的逻辑，但实际测试发现，在beforeunload事件回调中调用Logout接口时，请求无法正常命中对应的后端控制器方法。

原有实现代码如下：

<script type="text/javascript">
  window.addEventListener("beforeunload", function (event) {
    window.setTimeout(function () {
      $.ajax({
        type: "Get",
        url: "/LoginIdentity/Logout",
        success: function (data) {
          console.log(data);
        },
        error: function (response) {
          console.log(response.responseText);
        }
      });
    }, 500);
  });
</script>

• 浏览器触发beforeunload/unload事件时，会直接清空页面的异步任务队列、中断所有未完成的普通网络请求，代码里套了500ms延迟的setTimeout，回调还没进入执行栈，页面进程就已经被销毁，根本不会执行。
• 普通jQuery异步AJAX属于非保活请求，在页面卸载阶段的调度优先级极低，哪怕去掉setTimeout直接调用，大概率也会被浏览器直接中断，请求发不到后端。
• 本质上前端的卸载事件本身就不可靠：浏览器崩溃、系统强制结束进程、设备突然断网/断电的场景下，beforeunload事件根本不会触发，就算把请求发成功了，也覆盖不了所有异常关闭的场景，靠前端事件做会话清理本身就有逻辑漏洞。

方案1：前端适配（仅覆盖正常关闭浏览器场景，临时方案） #

使用浏览器专门为页面卸载场景设计的navigator.sendBeacon()接口发登出请求，这个API会让浏览器把请求交给系统网络栈保活发送，哪怕页面进程被销毁，请求也会正常发出去，不会被中断。
注意事项：

• 不要套任何异步延迟逻辑，直接在事件回调里同步调用
• sendBeacon默认发POST请求，同域下会自动携带HTTPOnly Cookie，不需要手动操作Cookie
• 接口不要用GET方法，避免被浏览器预加载、缓存机制误触发导致意外登出

实现代码：

window.addEventListener("beforeunload", function () {
  const formData = new FormData();
  formData.append("logout_source", "browser_close");
  // 优先用sendBeacon
  if (navigator.sendBeacon) {
    navigator.sendBeacon("/LoginIdentity/Logout", formData);
    return;
  }
  // 极老浏览器兜底用同步XHR，注意现代浏览器已逐步限制unload阶段的同步请求，仅做兜底
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "/LoginIdentity/Logout", false);
  xhr.withCredentials = true;
  xhr.send(formData);
});

方案2：服务端会话机制优化（推荐，根治所有场景问题） #

不要依赖前端事件做会话状态清理，从Identity Server的会话配置入手从根源解决问题：

• 开启会话空闲超时+滑动过期策略：比如配置用户15分钟无任何接口访问就自动失效对应会话，就算Cookie残留在客户端，也无法通过鉴权，不会触发业务异常。
• 增加会话心跳校验：前端页面存活时每隔5分钟发一次轻量心跳请求，后端连续2个周期没收到对应会话的心跳，就主动标记会话为失效，不管用户是直接关浏览器、断网还是崩溃，会话都能自动清理。
• 直接调整Identity Server的Cookie生命周期：不要把会话Cookie设置为浏览器关闭自动删除（不同浏览器对这类Cookie的处理逻辑不一致），通过服务端的过期策略控制会话有效性，稳定性远高于前端触发的逻辑。

• 不要在beforeunload/unload事件回调里写任何异步逻辑，包括setTimeout、Promise、普通fetch/异步AJAX，这类任务在页面销毁时会被直接清空，没有执行机会。
• 现代浏览器对卸载事件的执行时长有严格限制，一般只有几毫秒的执行窗口，不要在回调里写复杂计算、大量DOM操作等耗时逻辑。
• 如果站点有单页路由跳转场景，不要把路由跳转和页面关闭的beforeunload事件混为一谈，路由跳转不会销毁页面进程，要额外区分场景避免误触发登出。

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