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 中都会出现问题。我收到了相同错误的版本，例如Fetch API cannot load ... due to access control checks当我在 pagehide 事件中使用不同类型的 HTTP 请求程序时。我确信这不是 CORS 错误，因为完全相同的请求在页面隐藏事件之外不会出现问题。

虽然不建议这样做，因为它会阻塞主线程，但我会使用同步请求，直到 Safari 中的 bug 得到修复。对于我的用例，更重要的是成功发送来自 pagehide 的分析数据，即使它会给最终用户带来轻微的延迟。同步 HTTP 请求是一个无聊的解决方法，直到 bug 得到修复，希望很快就能修复，因为来自 @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');
}

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