How to add a http header to openlayers4 requests?

Question

some wms or wfs sources require user and password authentication. for example https://apps.sogelink.fr/maplink/public/wfs?request=GetCapabilities need Basic authentication. How can I inject this authentication?

Answer 1

You can provide your own imageLoadFunction to an ImageWMS source. The default one just takes the URL and inserts it as the src of the img tag:

ol.source.Image.defaultImageLoadFunction = function(image, src) {
  image.getImage().src = src;
};

That question was already asked on the OpenLayers GitHub, here is an example from there:

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

The documentation of OpenLayers is really good. Just find an example that uses features you want and then follow the links to the API docs.The ol.source.Vector doc even includes an example of a loading function for WFS, where you could manipulate the request:

new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  loader: function(extent, resolution, projection) {
    var wfsUrl = 'TODO';
    var xhr = new XMLHttpRequest();
    // see above example....
  }
});