Request headers?

[mddi3]

How can I inject a http header into every map layer request?

In this case, I need to send an Authentication header for a given layer and source, but I may want to send other headers too.

[tschaub]

By default, image loading happens like this: img.src = 'http://example.com/tile.png'; - that is, we set the src attribute of an Image to the image url. In this case, you don't have an opportunity to set the headers for the request.

You can override this behavior by calling source.setTileLoadFunction(customLoader). This assumes you are working with a "tile image" source. Then it is your responsibility to define the custom loader. This function will get called with an ol.ImageTile and a string URL.

The rest is up to you. Your custom loader might look something like this:

function customLoader(tile, src) {
  var client = new XMLHttpRequest();
  client.open('GET', src);
  client.setRequestHeader('foo', 'bar');
  client.onload(function() {
    var data = 'data:image/png;base64,' + btoa(unescape(encodeURIComponent(this.responseText));
    tile.getImage().src = data;
  });
  client.send();
}

[mddi3]

Thanks!

We'll initially be using this for WMS and WMS-C, so I'm guessing setImageLoadFunction() is what we'll need to override.

[yong2khoo88]

Hi, is this actually working?
I tried writing a customLoader on a layer which doesn't require a header. (and doesn't set any http header)
The result is just empty (return nothing, no error message)

Is there anything that i miss out?

[yong2khoo88]

I open the issue again in #5401

[oshawa-connection]

This is one of the first links to show up in google searches, and doesn't seem to quite work 8 years later. So here is an updated answer that helped me: https://stackoverflow.com/a/50492340
But here is the code from the answer in case the link dies for any reason:

function tileLoader(tile, src) {
  const client = new XMLHttpRequest();

  client.open('GET', src);
  client.responseType = 'arraybuffer'; // this line is key
  client.setRequestHeader('Authorization', 'Basic ' + btoa(user + ':' + pass)); // or set whatever header you like

  client.onload = function () {
    const arrayBufferView = new Uint8Array(this.response);
    const blob = new Blob([arrayBufferView], { type: 'image/png' });
    const urlCreator = window.URL || (window as any).webkitURL;
    const imageUrl = urlCreator.createObjectURL(blob);
    tile.getImage().src = imageUrl;
  };

  client.send();
}