2

Recently chrome stop support for synchronos xmlhttprequest on page unload or beforeunload event https://www.chromestatus.com/feature/4664843055398912

i try this solution Perform an asynchronous service get when closing browser window / tab with Angular but not seems to be working in latest chrome versions

Now i am using navigator.sendbeacon api like this

let headers = {
       type: 'application/json; charset=utf-8',
       'authorization': `bearer ${token}`
  }
   let blob = new blob([json.stringify({a:"9"})], headers);

    navigator.sendbeacon(uri, blob);

Api is throwing 401 so seems like authorization is not working, Is there any other alternative to navigator.sendBeacon

4

1 回答 1

4

在撰写本文时，没有。Chrome（可能还有其他浏览器迟早会更早）将禁止 XHR 同步，因为用户体验不佳（如果用户关闭选项卡并发出 XHR 同步请求，浏览器将挂起）。

虽然有一些解决方法，但每个都有其缺点

  1. 使用新的（和实验性的）sendBeacon API -sendBeacon简单地将请求“排队”，这样可以保证即使在页面卸载时也会触发请求。在不阻止用户体验的情况下也是如此。对此的一些限制是默认情况下您无法更改请求标头。如果您确实需要添加自定义标头，则必须使用 blob，并且标头也应该是 CORS 友好的。并且不适用于旧浏览器（看着你，IE）
  2. Use fetch()API +keepalive标志 - 但如果您请求标头在 CORS 安全列表中，这将再次起作用。基本上，如果您的fetch()请求具有某些请求标头，则出于安全原因可以发出预检请求。如果发出这样的预检请求，则某些浏览器不允许使用fetch()+ 。keepalive基本上，您需要保持您的请求简单才能使其正常工作。例如，您不能在content-type=application/json此处使用 a。一种解决方法是发送数据text/plain并让您的服务器相应地处理它。可以在此处找到有关CORS 简单与预检请求的更多信息。
  3. Chrome 确实允许临时解决方法，但这只能在 2020 年 10 月之前有效。更​​多信息请点击此处。
于 2020-02-25T19:44:03.843 回答