Navigator.sendBeacon 不使用授权标头答案

【问题标题】：Navigator.sendBeacon not working with Authorization HeadersNavigator.sendBeacon 不使用授权标头
【发布时间】：2020-06-03 07:19:40
【问题描述】：

最近chrome在页面卸载或卸载事件前停止支持同步xmlhttprequest https://www.chromestatus.com/feature/4664843055398912

我尝试了这个解决方案Perform an asynchronous service get when closing browser window / tab with Angular，但似乎不适用于最新的 chrome 版本

现在我正在使用这样的 navigator.sendbeacon api

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 正在抛出 401，因此似乎授权不起作用， navigator.sendBeacon 还有其他替代方法吗

【问题讨论】：

标签： asynchronous-postback sendbeacon

【解决方案1】：

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

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

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

【讨论】：