页面离开时onBeforeUnload取消HTTP请求的解决方案

当页面触发beforeunload事件时，普通fetch请求会因页面即将卸载被浏览器取消，用async/await等待请求完成又会弹出确认弹窗，以下是两种可行的解决办法：

方案一：使用navigator.sendBeacon() #

这是浏览器专为页面卸载场景设计的API，异步发送请求且不会阻塞页面卸载，也不会触发确认弹窗。改写你的代码如下：

window.addEventListener('beforeunload', () => {
  navigator.sendBeacon('/api/endSession');
});

注意：sendBeacon默认采用POST请求，请求体仅支持Blob、FormData、字符串等类型，无法自定义请求头，若有自定义头需求，建议用方案二。

方案二：Fetch API 搭配keepalive参数 #

在fetch配置中添加keepalive: true，可让请求在页面卸载后继续执行，同样不会阻塞页面或触发弹窗：

window.addEventListener('beforeunload', () => {
  fetch('/api/endSession', {
    method: 'POST',
    keepalive: true
  });
});

注意：keepalive有请求大小限制（通常为64KB），如果请求体过大，优先选择sendBeacon。

另外，建议使用addEventListener绑定事件，而非直接赋值onbeforeunload，避免覆盖其他事件监听逻辑。

内容的提问来源于stack exchange，提问作者Coder Gautam YT