使用Leaflet js时如何在授权标头上附加令牌

Question

我正在Angular.js地图应用程序中使用Leaflet。我的资源之一需要带有令牌的授权标头。我使用的是传单实时插件（可在此处找到https://github.com/perliedman/leaflet-realtime）来获取地图更新，因此在实时执行获取数据时需要能够指定我的标头。

我首先尝试使用另一个库fetch-intercept（可在此处找到https://github.com/werk85/fetch-intercept）来拦截请求并附加标头，但拦截器被忽略了。我在拦截器中包含了console.log，但从未实现过。

经过更多研究，我发现应该支持指定标头：https://github.com/perliedman/leaflet-realtime/pull/83。但是，我找不到如何正确附加授权令牌的示例。这是我目前正在尝试的内容：

this.mapRealtime = L.realtime({
  url: this.getRealtimeUrl(),
  crossOrigin: true,
  headers: {"Authorization": "token"},
  type: 'json',
}, 

但是，当我从Web浏览器（Chrome）调试控制台检查网络日志记录时，看到的所有请求标头是：

显示临时标题

访问控制请求标题：授权

访问控制请求方法：GET

并且服务器返回状态403，错误类型为MissingAuthenticationTokenException。

任何人都可以提供有关如何正确附加令牌的示例吗？谢谢！

Answer 1

实时传单仅采用url或json文件路径，您将无法传递标头（auth），因为标头（auth）具有无法使用的补丁程序。我面临着同样的问题。我所做的是：

 realtime = (L as any).realtime(async function (success, error) {
    let geodataJson = await self.updateGeoJson();
    success(geodataJson);
  }, {
    interval: 15 * 1000,
    onEachFeature: onEachFeature,......

我具有实时传递功能，在该函数中，我使用带有标题的简单API进行了调用

async  updateGeoJson() {
await this.api.getMarkersGeoJson().subscribe((res: any) => {
  this.geoData = res;
});
return this.geoData; }

第一次调用时，它将不会从此函数获取数据，因此我们还需要在initmap之前的ngOnInit中的this.geoData中加载数据。对我来说，这是有效的，我知道这只是可以解决的，但问题仍然存在于传单的实时中。希望这对您有用