码迷,mamicode.com
首页 > Web开发 > 详细

Geoserver通过ajax跨域访问服务数据的方法(含用户名密码认证的配置方式)

时间:2018-10-26 20:41:05      阅读:583      评论:0      收藏:0      [点我收藏+]

标签:class   步骤   state   存在   解决方法   复制   inux   windows安装   lips   

Goeserver数据有两种,一种需进行用户密码的权限认证,一种无须用户密码。对于网上跨域访问Geoserver数据的种种方法,对这2种数据并非通用。

笔者将Geoserver官方下载的Geoserver.war包部署到linux服务器,通过前端 ajax 访问geoserver数据失败,其中包含跨域问题和用户名密码认证问题,查询网上各类方法进行尝试,结果浏览器控制台分别报出了401,403和跨域错误提示。其中:

401错误:ajax未进行用户名密码验证导致;

403错误:用户名密码验证失败导致;

跨域错误(两种可能):

  1,真实的跨域导致;

  2,403错误引发,此时也可能真的存在跨域但不一定。

解决方法:

1. jetty方式(对于跨域,亲测可用,但用户名密码认证可否配置未探索)

步骤1, web.xml配置跨域:

在Geoserver的发布包中找到WEB-INF/web.xml,打开添加如下配置:

<filter>
        <filter-name>cross-origin</filter-name>
        <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
        <init-param>
        <param-name>allowedOrigins</param-name>
        <param-value>*</param-value>
        </init-param>
        <init-param>
        <param-name>allowedMethods</param-name>
        <param-value>GET,POST,OPTIONS</param-value>
        </init-param>
        <init-param>
        <param-name>allowedHeaders</param-name>
        <param-value>x-requested-with,content-type,access-control-allow-origin,access-control-allow-methods,authorization,accept</param-value>
        </init-param>
</filter>
<filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
</filter-mapping>

步骤2,添加与Geoserver版本对应的jetty jar包。

下载jetty.sevlets.jar,jetty.utli.jar,jetty.sevlet.jar三个(前两个必须,第三是否必须未验证),复制到Geoserver发布包的/WEB-INF/lib文件夹下。

注意:jetty 的jar包要与Geoserver兼容,笔者用的是 geoserver-2.13.2-war 和 jetty的 9.2.13.v20150730版本。若想确定版本的对应关系,我了解到的一种傻瓜方法是,下载对应的Geoserver 的windows安装版,安装后在安装包中可找到相应版本的这三个jar 包,可直接复制使用。

步骤3. ajax代码

       var url="http://10.0.30.63:8093/geoserver/tiger/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tiger:poi&maxFeatures=50&outputFormat=application%2Fjson";
            $.ajax({
                type: "get",
                url: url,
                success: function(response){
                    console.log(response);
                },
                error:function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus+";"+errorThrown);
                },
            })

  

2. Tomcat配置方式(可同时解决跨域和用户密码验证的问题,亲测可用)

 步骤1. web.xml配置

在Geoserver发布包的 /WEB-INF/web.xml文件中添加如下配置:

可参考官网:http://tomcat.apache.org/tomcat-9.0-doc/config/filter.html#CORS_Filter

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>

  <!--关键部位1,cors.allowed.origins的值
    1.若需进行用户密码验证,则其值不可为“*”,可为需进行跨域的应用域名端口的链接(如下所示),因为为“*”的该项与下面的cors.support.credentials不可同时存在,否则tomcat启动会出错。
    2.若无序进行用户名密码验证,则其值可为“*”。若为“*”,则下面的cors.support.credentials项要删除。
 -->
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>http://10.70.1.183:8080,http://localhost:8080</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>

<!--关键部位2,cors.support.credentials项
  1,若需进行用户名密码验证,则必须存在;
  2. 若无效进行用户名密码验证,仅设置跨域,则可删除
-->

  <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>10</param-value>
  </init-param>
</filter>

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

  

步骤2. ajax代码

            url=‘http://10.0.30.63:8093/geoserver/rest/fonts.json‘;

            $.ajax({
                type: "get",
                url: url,
                headers: {
                    Authorization:"Basic YWRtaW46Z2Vvc2VydmVy",
                },
//对于用户名密码验证,headers中Authorization项必须有,其值为加密后的“用户名:密码”,可以换成下面beforeSend的写法(两种不同的设置http请求头的方式)
//                 beforeSend:function(xhr){
//                     xhr.setRequestHeader ("Authorization","Basic YWRtaW46Z2Vvc2VydmVy");
//                 },

                dataType: "json",
                success: function(response){
                    console.log(response);
                },
                error:function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus+";"+errorThrown);
                },
            })

  

Geoserver通过ajax跨域访问服务数据的方法(含用户名密码认证的配置方式)

标签:class   步骤   state   存在   解决方法   复制   inux   windows安装   lips   

原文地址:https://www.cnblogs.com/zhcBlog/p/9858393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!