map.transformRequest missing documentation

[stevage]

https://www.mapbox.com/mapbox-gl-js/api/#map

options.transformRequestRequestTransformFunction(default null)
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.

Issues:

• The parameters passed to the callback aren't documented. From another source I see they are "url" and "resourceType" (at least).
• The values of the "resourceType" parameter in particular aren't documented. They seem to be "Style", "Source" or "Tile" (at least). Not clear on the difference between "Source" and "Tile" (maybe the former is a TileJSON fetch). Also a bit surprised that they're capitalised.
• Types of return object properties aren't defined. Again, from the other source, I see that headers should be an object. Maybe a link to a relevant spec or something would help here.
• An example would help a lot. Perhaps:

transformRequest: (url, resourceType) => {
        if (resourceType === 'Tile' && url.match('example.com')) {
            return {
                url: url,
                headers: { 'Authorization': 'Basic ' + btoa('myusername:mypassword') }
            };
        }
    }

[loosi]

@stevage I found some weird problems with "headers". How did you come up with "Authorization"
It seems that no named header except "Authorization" works. Just cut a single letter from the word "Authorization" and the header gets added to "access-control-request-headers". That actually breaks the whole page then.
Can you verify that for me?

[asheemmamoowala]

Just cut a single letter from the word "Authorization" and the header gets added to "access-control-request-headers". That actually breaks the whole page then.

You can see from the Fetch spec that other headers are not safelisted for no-cors mode, and automatically convert the Fetch request to cors mode.

To enable serving these types of requests from the browser, your server endpoints would need to correctly respond to cors pref-flight (OPTIONS) requests with the appropriate values in the Access-Control-* headers,

[pathmapper]

Meanwhile more information regarding this option is available:
https://docs.mapbox.com/mapbox-gl-js/api/properties/#requestparameters

Found it by accident, would be good to link it from https://docs.mapbox.com/mapbox-gl-js/api/map/#map.

[asheemmamoowala]

Docs now include an example and link to the request parameters. Closing here.