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

时间：2023-09-04 15:13:49

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项要删除。
　　　　注意，1条件下，其值的配置是，在欲访问的远程geoserver端的web.xml中添加web应用端域名端口的链接，如我的web应用部署在 A 电脑上，Geoserver服务器为 B 电脑，则配置B 的web.xml（在cors.allowed.origins中加入A 电脑 tomcat的域名端口链接）

　-->

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

                },

            })

　　

相关文章