How to specify Authorization Header for a source in mapbox-gl-js?

Question

How do I set a request header for a wms source with mapbox-gl-js? I need all tile requests to add a header that looks like:

Authorization: "Bearer base64-encoded-token"

The WMS example, map#addSource and map#addLayer lead me to believe it is not possible to set tile request headers.

Answer 1

You can now use the transformRequest option to add a custom header:

A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests. Expected to return an object with a url property and optionally headers and credentials properties.

Example:

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 }
      }
    }
  }
});