> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)

# Change and inspect requests with transformRequest

Use the `Map` object's [`transformRequest`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) option to run a callback before the map makes any external request. The callback can rewrite the URL, attach headers, or set the `credentials` property for cross-origin requests — useful for self-hosted or third-party resources that need custom authentication or routing.

To change a request, return a [`RequestParameters`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#requestparameters) object (or a `Promise` that resolves to one); return nothing to leave the request unchanged. This example adds a vector tile source hosted outside of Mapbox — the USGS National Hydrography Dataset — and signs every request to that host with an `auth_token` parameter, leaving requests to any other host unchanged.

> **Note**
> 
> Mapbox-hosted resources are already signed with your access token, so `transformRequest` is only needed for resources you fetch from elsewhere. This dataset is public and ignores the `auth_token` parameter, which stands in for whatever your own server or third-party provider expects.

> Example code:

**JavaScript**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Change and inspect requests with transformRequest</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.30.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.30.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>

<script>
    // This host needs no auth token; we sign it only to demonstrate transformRequest.
    const nhdTiles =
        'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/NDHPlus_v21/VectorTileServer/tile/{z}/{y}/{x}.pbf';
    const authToken = 'example-auth-token';

    const map = new mapboxgl.Map({
        // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
        container: 'map',
        zoom: 8,
        minZoom: 7,
        center: [-121.6, 38.1],
        style: 'mapbox://styles/mapbox/standard',
        config: {
            basemap: {
                theme: 'monochrome'
            }
        },
        // `transformRequest` runs before every request the map makes. Return a
        // `RequestParameters` object ({url, headers, credentials}) to modify a
        // request, or nothing to leave it unchanged.
        transformRequest: (url) => {
            if (new URL(url).hostname !== new URL(nhdTiles).hostname) return;
            const separator = url.includes('?') ? '&' : '?';
            return {
                url: `${url}${separator}auth_token=${authToken}`
                // Or authorize with a header instead:
                // headers: {'Authorization': `Bearer ${authToken}`}
            };
        }
    });

    map.on('load', () => {
        map.addSource('nhd', {
            type: 'vector',
            tiles: [nhdTiles],
            maxzoom: 7,
            attribution:
                '<a href="https://www.usgs.gov/national-hydrography">USGS National Hydrography Dataset</a>'
        });
        map.addLayer({
            id: 'rivers',
            type: 'line',
            source: 'nhd',
            'source-layer': 'Flowlines:2',
            slot: 'middle',
            paint: {
                'line-color': '#4264fb',
                'line-width': 1.5
            }
        });
    });
</script>

</body>
</html>
```