We are trying to publish WMTS with basic authentication from Geoserver.

Our addwmts() function works without a problem when there is no basic authentication.

We have stored our tiles in Geoserver. We have placed a Rest API between Geoserver and the Web interface.

We are trying to publish WMTS tiles that we get from Rest API with basic authentication onto the web interface.

Our Rest API returns us a .xml document and we want to read this .xml to visualize it on our web interface.

Relevant parts of our JS and html codes are below. We have a button at our index.html file that is triggering addwmts() function.

When we run below code we get 3 responses we observe in Fiddler

We can not send authorization header for our tiles. How can we fix that 401 problem ?

We have checked most of the links including the following :

OpenLayers 2.12 and http basic authentication woes

Openlayers 3 getting 401 error from geoserver with secured layers

<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <link href="asdf.css" rel="stylesheet">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script type="text/javascript" src="asdf.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <button onclick="addwmts()">WMTS</button>
    <div class="map-container">
        <div id="layertree" class="layertree"></div>
        <div id="map" class="map" tabindex="-1">
            <div id="toolbar" class="toolbar"></div>


var parser = new ol.format.WMTSCapabilities();

function addwmts() {

var username = 'myUserName';
var password = 'myPass';

function make_base_auth(user, password) {
    var tok = user + ':' + password;
    var hash = btoa(tok);
    return 'Basic ' + hash;
    type: "GET",
    url: "http://xxx.xxx.xxx.xx./xxxxxx/xxx/getCapabilities",
    dataType: 'text',
    async: true,
    data: '<>',
    beforeSend: function(xhr) {
        xhr.setRequestHeader('Authorization', make_base_auth(username, password));

    success: function(text) {
        let result = parser.read(text);
        let options1 = ol.source.WMTS.optionsFromCapabilities(result, {
            layer: 'myIdentifier',
            matrixSet: 'EPSG:4326',
            format: 'image/png',
            projection: 'EPSG:4326',
            crossOrigin: 'use-credentials'
        var overlay1 = new ol.layer.Tile({
            title: 'myLayerTitle',
            preload: 4,
            opacity: 1,
            visible: true,
            source: new ol.source.WMTS((options1))
}); };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.