How to add a http header to openlayers3 requests?

Answered on github.

By default, image loading happens like this: img.src=”https://stackoverflow.com/questions/32914173/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();
}