API Beacon Не удается загрузить <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, похоже, возникают проблемы как в настольном, так и в iOS Safari в тот момент, когда он находится внутри события pagehide. Я получил версии той же ошибки, такие как Fetch API cannot load ... due to access control checks, когда я использую различные типы HTTP-запросчиков в событии pagehide. Я уверен, что это не ошибка CORS, поскольку точно такой же запрос не вызывает проблем за пределами события pagehide.

Хотя это не рекомендуется из-за блокировки основного потока, я использую синхронные запросы, пока ошибка не будет исправлена ​​в Safari. Для моего случая использования более важно, чтобы аналитические данные из шкуры страницы были успешно отправлены, даже если это вызывает небольшую задержку для конечного пользователя. Синхронные HTTP-запросы - обходной путь, пока ошибка не будет устранена, что, как мы надеемся, скоро, так как ссылка @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, как только ошибка будет исправлена! Этот тип поведения, зависящего от браузера, никогда не доставляет удовольствия программировать.