在 navigator.sendbeacon() 中需要授权答案

【问题标题】：Need authorization in a navigator.sendbeacon()在 navigator.sendbeacon() 中需要授权
【发布时间】：2019-05-14 13:44:33
【问题描述】：

我的问题是，当我调用一个监听事件 onBeforeUnload() 的函数时，我想发布一个数据。问题是我的请求未经授权。我需要在某处添加我的承载，但我不知道如何。

这是我的实际代码：

@HostListener('window:beforeunload', ['$event'])
  onBeforeUnload(): void {
     navigator.sendbeacon(`${localhost:8080/apiRest}`, infoIWantToSent);
  }

目前，请求发送 401:unhautorized，这是正常的，因为我不传输任何承载。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

我找到了这个解决方案：

@HostListener('window:beforeunload', ['$event'])
  onBeforeUnload(): void {
   fetch('url', {
        keepalive: true,
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
        body: JSON.stringify(infoIWantToSent),
      });
}

显然，如果我们必须使用令牌连接，我们不能使用 navigator.sendbeacon() https://w3c.github.io/beacon/#sec-sendBeacon-method 它适用于几乎所有情况，但当我关闭包含我的页面的 iframe 时则不行。

【讨论】：

【解决方案2】：

试试这个：

  let headers = {
    Authorization: 'Bearer ' + token
  };
  let blob = new Blob([JSON.stringify(infoIWantToSent)], headers);
  navigator.sendBeacon('url', blob);

【讨论】：

感谢您的回复。不幸的是，我在用你的方法编译时遇到了这个错误：error TS2559: Type '{ Authorization: string; }' 与类型 'BlobPropertyBag' 没有共同的属性。我试图添加一个类型 lyke this ``` const headers = { type: 'application/json', Authorization: 'Bearer ' + this.getUser().token }; ``` 但它也不起作用。
我会说包括`type: 'application/json'`，但既然你已经尝试过了，我没有更多的输入。对不起。破解后告诉我解决方案。万事如意