Получение авторизации на Geoserver из скрипта на JavaScript

Суть задачи такова - есть ресурс на котором логинится пользователь. Ресурс этот использует данные с Geoserver'а который расположен на другом домене (порту). Да, тот самый cross-origin.

Для начала нужно разрешить CORS на сервере приложений в котором работает Geoserver (здесь web.xml для Tomcat 8).

 <filter>
      <filter-name>CorsFilter</filter-name>
      <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
      <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,OPTIONS</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Authorization,Access-Control-Allow-Origin,Access-Control-Allow-Credentials,Access-Control-Allow-Headers,Content-Type,X-Requested-With,Accept,Origin,Access-Control-Request-Method</param-value>
      </init-param>
    
      <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials,Access-Control-Allow-Headers</param-value>
      </init-param>
      <init-param>
        <param-name>cors.support.credentials</param-name>
        <param-value>true</param-value>
      </init-param>
      <init-param>
        <param-name>cors.preflight.maxage</param-name>
        <param-value>1000000</param-value>
      </init-param>
    </filter>

 и в разделе  <filter-mapping>

    <filter-mapping>
      <filter-name>CorsFilter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

Далее в JavaScript:

 function init(){
    var req = new XMLHttpRequest();
    function make_base_auth(user, password) {
        var tok = user + ':' + password;
        var hash = btoa(tok);
        return "Basic " + hash;
    }
     
// Вариант на jQuery

    $.ajax({
            url: "http://localhost:8080/geoserver/j_spring_security_check", //j_spring_security_check
            type: "POST",
            crossDomain: true,
            dataType: 'text',
            contentType: 'application/x-www-form-urlencoded',//text/plain',application/json
            data: {
                username:'admin',
                password:'geoserver'
            },
            xhrFields: {
                withCredentials: true
            },
            headers: {
                "Access-Control-Allow-Credentials": true,
                "Access-Control-Allow-Origin": "*"
              }
        }).success(function(data, textStatus) {
                console.log('success data: '+data, 'success textStatus: '+textStatus);              
            } 
        ).error(function(jqXHR, textStatus, errorThrown) {
            console.log('error errorThrown: '+errorThrown, 'error textStatus: '+textStatus);
            })
        .complete(function( jqXHR, textStatus) {
            console.log('complete textStatus: '+textStatus);
            var view = new ol.View({
                    center: ol.proj.transform([84.952, 56.464], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 6//17
                });
                var tis = new ol.layer.Image({
                    source: new ol.source.ImageWMS({
                        url: 'http://localhost:8080/geoserver/wms?',
                        params: {
                            "Authorization": make_base_auth("admin", "geoserver"),
                            'VERSION': '1.1.0',
                            'LAYERS': 'tis:admin',
                            'transparent': 'true'
                        }
                    })
                });
                var map = new ol.Map({
                    layers: [tis],
                    target: 'map',
                    controls: ol.control.defaults().extend([
                        new ol.control.ScaleLine({
                            units: 'metric'
                        })
                    ]),
                    view: view
                });
        });
              
 // Вариант на чистом JavaScript
  
    function mapLoad() {
        console.log(req.readyState, req.status);
        if (req.readyState === 4){
            if (req.status === 0){
                var view = new ol.View({
                    center: ol.proj.transform([84.952, 56.464], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 6//17
                });
                var tis = new ol.layer.Image({
                    source: new ol.source.ImageWMS({
                        url: 'http://localhost:8080/geoserver/wms?',
                        params: {
                            "Authorization": make_base_auth("admin", "geoserver"),
                            'VERSION': '1.1.0',
                            'LAYERS': 'tis:admin',
                            'transparent': 'true'
                        }
                    })
                });
                var map = new ol.Map({
                    layers: [tis],
                    target: 'map',
                    controls: ol.control.defaults().extend([
                        new ol.control.ScaleLine({
                            units: 'metric'
                        })
                    ]),
                    view: view
                });
            }
        }
    };
 
    req.open('POST', 'http://localhost:8080/geoserver/j_spring_security_check', true);
    req.setRequestHeader('Access-Control-Allow-Origin', '*');
    req.setRequestHeader('Access-Control-Allow-Credentials', 'true');
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    req.followsRedirect=true;
    req.withCredentials=true;
    req.onreadystatechange  = mapLoad;       
    req.send('username=admin&password=geoserver');
}



Популярные сообщения из этого блога

Настройка сети в VirtualBox

/usr/bin/env: node: Нет такого файла или каталога

Использование WFS-источника Geoserver в своём сайте на Openlayers