不使用授权头的Navigator.sendBeacon

Question

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

我尝试了这个解决方案-- 使用角关闭浏览器窗口/选项卡时执行异步服务获取，但似乎不适用于最新的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还有其他替代方法吗？

Answer 1

在写这篇文章的时候没有。Chrome (可能其他浏览器也会提前)会因为用户的UX不好而不允许XHR-同步(如果用户关闭选项卡并发出XHR-同步请求，浏览器将挂起)。

虽然有一些解决办法，但每种方法都有各自的缺点。

1. 使用新的(和实验性的) sendBeacon API - sendBeacon，只需“排队”请求，这就保证了即使在页面卸载时也会触发请求。在不阻塞UX的情况下。这方面的一些限制是，默认情况下不能更改请求标头。如果您确实需要添加自定义标头，则必须使用用水珠，而且标头也应该是CORS友好的。不会在旧浏览器上工作(看看你，IE)
2. Use fetch() API + keepalive标志--但是如果请求头位于CORS-keepalive标记上，这同样有效。基本上，如果您的fetch()请求有特定的请求头，那么出于安全考虑，可以发出预运行请求。如果发出这样的飞行前请求，则某些浏览器不允许使用fetch() + keepalive。基本上，您需要保持您的请求简单，以使这一工作。例如，您不能在这里使用content-type=application/json。解决方法之一是以text/plain的形式发送数据，并让您的服务器相应地处理它。有关CORS简单请求与飞行前请求的更多信息可以在这里找到。
3. Chrome确实允许暂时解决问题，但这只会持续到2020年10月。更多信息，在这上面。