使用 Leaflet 设置 HTTPS 标头

Question

我尝试使用 Leaflet 和 leaflet-wms-header （在我的 HTML 中包含 leaflet-wms-header index.js ）在标头中包含授权令牌 - 但没有成功。我的代码基于 leaflet-wms-header README，是：

const OS_SERVICE_URL = 'https://api.os.uk/maps/raster/v1/wmts';
currentToken = response.access_token;  // as received from token server
map = L.map('map', mapOptions);
markers = L.layerGroup().addTo(map);
//  L.tileLayer(OS_SERVICE_URL + '?' + mapParamsString).addTo(map); // this works!
L.tileLayer.wmsHeader(
    OS_SERVICE_URL + '?' + mapParamsString,
    {
    layers: 'ne:ne',
    format: 'image/png',
    transparent: true,
    },
    [{ header: 'Authorization', value: 'Bearer ' + currentToken }],
    null).addTo(map);  // this doesn't work!

我的浏览器控制台消息是：

TypeError: undefined is not a function (near '...L.tileLayer.wmsHeader...')
updateAPIToken — site.js:296
\\ remainder of trace omitted

Answer 1

您可以使用 leaflet-wms-header-opt 插件（此插件的更新版本）并像这样创建 WMS：

let wmsLayer: L.TileLayer.WMSHeader = L.TileLayer.wmsHeader(
    'https://GEOSERVER_PATH/geoserver/wms?',
    {
        layers: layers,
        format: 'image/png',
        transparent: true,
    }, [
        { header: 'Authorization', value: 'JWT ' + MYAUTHTOKEN },
        { header: 'content-type', value: 'text/plain'},
    ]
).addTo(map);

或者尝试创建一个像这样的自定义 WMS 图层（它需要

superagent

包）：

L.TileLayer.WMS_Headers = L.TileLayer.WMS.extend({
  createTile(coords, done) {
    const url = this.getTileUrl(coords);
    const img = document.createElement('img');
    superagent
      .get(url)
      .set(‘header’, ‘header value’)
      .responseType('blob')
      .then((response) => {
        img.src = URL.createObjectURL(response.body);
        done(null, img);
      });
    return img;
  }
});

L.tileLayer.wms_headers = (url, options) => new L.TileLayer.WMS_Headers(url, options);

来源：https://gist.github.com/rrameshkumar76/b2596b20142490f902901a581c8807c0