Chrome浏览器中navigator.sendBeacon请求无限挂起问题求助

页面切换时执行以下代码发送请求，Firefox运行正常，但Chrome中请求始终处于pending状态：

navigator.sendBeacon('my-url/session', new Blob([JSON.stringify(data)], {
      type: 'application/json'
    }));
return Promise.resolve({updatedAt: Date.now()});

附请求状态截图：

• Pending请求：
• Stalled请求：

可能原因及解决办法 #

1. Blob类型的兼容性问题 #

Chrome对sendBeacon传递application/json类型Blob的处理存在差异，容易引发请求停滞。
解决方式：

• 改用FormData封装数据：

const formData = new FormData();
formData.append('data', JSON.stringify(data));
navigator.sendBeacon('my-url/session', formData);

• 或调整Blob的Content-Type为text/plain：

const blob = new Blob([JSON.stringify(data)], { type: 'text/plain' });
navigator.sendBeacon('my-url/session', blob);

2. 页面卸载时机的竞争问题 #

Chrome页面卸载时的资源回收机制可能导致sendBeacon请求未完成初始化就被挂起，尤其是页面快速切换时。
解决方式：
使用fetch搭配keepalive: true替代sendBeacon，同时结合visibilitychange事件确保请求触发时机正确：

window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    fetch('my-url/session', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      },
      keepalive: true
    });
  }
});

3. 服务器端接收逻辑异常 #

Chrome与Firefox发送的请求在头部或数据格式上可能存在细微差异，若服务器未正确处理，会导致请求一直处于pending状态。
解决方式：
检查服务器日志，确认是否接收到请求、是否正确解析请求体，以及是否返回了合法的HTTP响应。

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