Openlayers 4 - Load WMS image layer require authentication

Question

I try to load WMS image layer with openlayers 4.6 and angular 5, the code is:

const syr_layer = new ol_layer_Image({
  source: new ol_source_ImageWMS({
      url: 'serverurl', crossOrigin: 'anonymous', serverType: 'geoserver',
      params: { 'LAYERS': 'tst:syr'},
      projection: 'EPSG:4326'
    });
});

But it throws an error:

GET (myserverurl) 401 (An Authentication object was not found in the SecurityContext)

How can I send authentication header with the GET request sent by openlayers?

Answer 1

Thanks @Thomas, your answer isn't correct 100% but it clear the way for me to get the correct answer.

This is the tileLoader function that worked for me:

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

  client.open('GET', src);
  client.responseType = 'arraybuffer';
  client.setRequestHeader('Authorization', 'Basic ' + btoa(user + ':' + pass));

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