Мне нужно отправить немного данных для отчета, когда пользователь закрывает или покидает определенную страницу. Поэтому я настроил конечную точку API и использую window.fetch с установленным флагом keepalive, чтобы убедиться, что вызов завершается, даже если страница полностью выгружается.
Рассматриваемый вызов Javascript выглядит следующим образом:
async onLeavingPage() {
(preparing data for call)
const response = await fetch(
(url),
{
keepalive: true,
method: "POST",
mode: "cors",
headers: {
"Content-Type": "application/json",
Authorization: axios.defaults.headers.common["Authorization"]
},
body: JSON.stringify({})
}
);
console.log(response);
}
Я вызываю его, наблюдая за событием pagevisibility и вызывая его, когда страница скрыта или закрыта, используя библиотеку жизненного цикла страницы.
lifecycle.addEventListener("statechange", (e) => {
if (e.newState === "hidden" || e.newState === "terminated") {
this.onLeavingPage();
}
});
Предпочтительным поведением является завершение вызова, даже если страница перезагружается или нажимается другая ссылка. Но из-за этой ошибки CORS этого не происходит. Он отлично работает в Chrome и Firefox, но в Safari происходит сбой с этим сообщением об ошибке в консоли:
Fetch API не может загрузиться (конечная точка API) из-за проверок управления доступом.
Тот же самый вызов fetch работает в Safari, если он вызывается в любых других обстоятельствах (например, при нажатии на ссылку или сворачивании, а затем развертывании страницы), так что это что-то особенное для вызова его при выгрузке страницы.
pagehide
, которое надежно срабатывает в Safari, даже еслиvisibilitychange
нет. - person sideshowbarker   schedule 14.01.2021