javascript - 导航到新页面时，由于访问控制检查，Beacon API 无法加载 <url>

Question

我有一个 navigation.sendBeacon在 Safari 上的页面隐藏事件期间将请求与一些分析数据一起发送到与当前页面位于同一域中的端点。这在关闭选项卡时工作正常，但在导航到新 url 时，Safari 抛出 Beacon API Cannot load <url> due to access control checks在尝试发出请求时。

此问题不会出现在 Chrome 上，也没有显示其他日志。我认为这不是 CORS 请求，所有域和子域都相同。

有没有其他人看到这个或知道如何修复？

Answer 1

使用任何类型的异步 HTTP 请求，无论是 sendBeacon、fetch 还是 XMLHttpRequest，在 pagehide 事件中似乎在桌面和 iOS Safari 中都有问题。当我在 pagehide 事件中使用不同类型的 HTTP 请求程序时，我收到了相同错误的多个版本，例如 Fetch API cannot load ... due to access control checks。我确信这不是 CORS 错误，因为完全相同的请求在 pagehide 事件之外没有问题。

虽然由于它会阻塞主线程而不推荐，但在 Safari 中修复错误之前，我正在使用同步请求。对于我的用例，更重要的是来自 pagehide 的分析数据被成功发送，即使它对最终用户造成了很小的延迟。同步 HTTP 请求是一个 meh 解决方法，直到错误被修复，希望很快，因为来自@Phillip Walton 的链接表明补丁已被接受但显然尚未发布。

if (isSafari && pageHideBroken) {
    $.ajax({
        type: "POST",
        async: false, //The most important line
        url: `https://`,
        data: 'Goodbye',
        timeout: 5000
                });
}
else {
    navigator.sendBeacon(`https://`, 'Goodbye');
}

我已经确认，在 Desktop Safari 和 iOS Safari 上，我的后端使用这种方法成功接收了数据。 JQuery 不需要发出同步 HTTP 请求，但我只是使用 $.ajax 作为示例，因为它与 XMLHttpRequest 相比更加简洁。如果您像我一样将此解决方法设为有条件的，那么一旦错误修复，就很容​​易换回 navigator.sendBeacon!这种依赖于浏览器的行为编写代码从来都不是一件有趣的事情。