如何在mapbox-gl-js中为源指定Authorization Header？

Question

我如何在mapbox-gl-js中为WMS源设置请求头？我需要为所有瓦片请求添加一个类似以下格式的标头：

Authorization: "Bearer base64-encoded-token"

根据WMS示例、map#addSource 和 map#addLayer，我认为设置瓦片请求头是不可能的。

- Pete

---

这里也遇到了同样的问题，但是是关于矢量切片源的。你找到了添加这个头部的方法吗？ - mofoyoda

我正在使用OpenLayers-3，它没有这个问题。 - Pete

Answer 1

现在你可以使用transformRequest选项来添加自定义头:

在地图请求外部URL之前运行的回调。该回调可用于修改url、设置头信息或为跨源请求设置credentials属性。应返回一个带有url属性和可选headers和credentials属性的对象。

示例：

const map = new mapboxgl.Map({
  container: 'map',
  center: [2.35, 48.86],
  zoom: 13,
  transformRequest: (url, resourceType) => {
    if (resourceType === 'Source' && url.startsWith('http://myHost')) {
      return {
        url: url,
        headers: { 'Authorization': 'Bearer ' + yourAuthToken }
      }
    }
  }
});

- ThunderDev

---

Mapbox的API文档仍然提到了这个选项，并且给出了一个类似的例子，所以我相信它应该仍然可以在当前版本中使用。你可能会遇到授权令牌的问题。 - ThunderDev

@ThunderDev 如果我理解正确的话，这将会在请求的header中添加一个“隐藏”的授权代码，这样别人就无法窥视浏览器的网络工具并使用我的令牌了吧？我正在将其集成到WordPress中，非常感谢您的回复。谢谢。 - Raging Vids

@RagingVids 我想你在谈论你的Mapbox访问令牌，不幸的是这不能被隐藏。 - ThunderDev

@ThunderDev，也许我有所遗漏，那么任何人如何保护他们的令牌呢？公开使它们可见，以便任何人都可以进来享受其他人的免费地图加载，这甚至公平吗？我对网络调用并不是很有经验，请原谅我的幼稚。 - Raging Vids

@RagingVids 通常会有域限制，例如令牌只在从您特定的域调用时有效。如果您需要更多关于此的信息，我建议您打开一个新问题，如果您同意的话。 - ThunderDev