Safari中pagehide事件调用sendBeacon跨页导航遇权限校验错误

我之前也踩过这个Safari专属的坑——明明是完全同域的请求，Chrome里正常工作，一到Safari导航到新URL时就抛出CORS错误，其实这是WebKit引擎在页面导航阶段对sendBeacon的上下文处理有特殊逻辑，并非真的跨域配置问题。

问题原因 #

Safari在**页面导航（而非关闭标签页）**触发pagehide事件时，会提前把当前页面的上下文标记为「即将卸载」，这时候浏览器的安全机制可能误将同域的sendBeacon请求判定为跨域请求。而Chrome的V8引擎在这个阶段的处理更宽松，不会出现这种误判。

解决方案 #

1. 改用fetch + keepalive替代sendBeacon #

fetch的keepalive选项和sendBeacon一样，能在页面卸载后继续完成请求，且Safari对它的上下文判断更准确：

window.addEventListener('pagehide', () => {
  const analyticsData = JSON.stringify({
    event: 'page_navigate',
    timestamp: Date.now(),
    // 其他分析字段
  });

  fetch('/api/analytics', {
    method: 'POST',
    body: analyticsData,
    headers: {
      'Content-Type': 'application/json'
    },
    keepalive: true,
    credentials: 'same-origin' // 如果需要携带Cookie等凭证，加上这个配置
  }).catch(err => {
    console.error('发送分析数据失败:', err);
  });
});

2. 切换到visibilitychange事件处理 #

visibilitychange事件会在pagehide之前触发，此时页面上下文还处于稳定状态，Safari不会误判请求：

window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    const data = new FormData();
    data.append('analytics', JSON.stringify({
      event: 'page_hidden',
      timestamp: Date.now()
    }));
    navigator.sendBeacon('/api/analytics', data);
  }
});

3. 额外检查项 #

• 确保请求URL和当前页面完全同域：包括协议（http/https）、端口、域名，比如不要从https://example.com请求http://example.com，即使域名相同也会触发跨域。
• 如果请求带自定义头，后端需要返回Access-Control-Allow-Headers响应头，允许对应的头字段（同域请求通常不需要，但Safari可能有特殊情况）。

总结 #

这个问题是Safari WebKit引擎的特有行为，不是真正的CORS配置问题。通过切换到fetch keepalive或者更早的visibilitychange事件，就能绕过这个误判逻辑，实现和Chrome一致的效果。

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