通过Openlayers中getGetFeatureInfoUrl方法请求WMS服务数据到客户端（Browser）（基于Geoserver服务器）

本文基于tomcat服务器进行网站开发，geoserver管理GIS数据服务，在tomcat服务器中访问geoserver时出现跨域访问被拒绝的杯具，遂本文要有理有据的阐述一下如何解决这个跨域访问geoserver中的GIS数据并以JSON数据格式返回到前端。

首先，说一下文章的目的。本文通过点击地图并以JSON格式返回与地图相关的属性数据，首先通过jquery中的ajax方法进行 jsonp 的请求，然后获取到geoserver发回的json数据。道理很简单，可是各种猫腻让人煞费苦心，很多时候会以面瘫的表情结束这一天的生活，第二天接的面瘫，为了防止him, you and me都变成面瘫，我一定要把这些细节说清楚。

然后，我就详细说一下，如下：

首先，本文利用jquery中的ajax方法提供的jsonp解决这个跨域问题，至于jsonp的详细原理，你可以访问我引用他人的文章，写的很详细。点击链接：

http://blog.csdn.net/lw19910913/article/details/73356212

ajax中有5个重要参数需要引起你的注意：

url, method,dataType,
jsonp, jsonpCallback.

url: 毋庸置疑，是你要跨域的网站地址，即geoserver的GIS数据地址；

method: 当然是请求方式啦，本文用’GET’；

dataType: 对于跨域问题，这是一个关键参数，该参数设置为 ‘jsonp‘;

jsonp: 该参数是干嘛的呢，不好意思，这是用于覆盖callback方法名字（注意覆盖的是名字，不是方法）的参数，可以不设置该参数，默认的名字就是callback；

jsonpCallback: 这个参数是制定返回函数的名字，即在自己的js文本中写一个方法，用于返回json数据的处理。我们假设为 ‘successCallback’。（successCallback为js脚本的函数名）

以上参数介绍可能有点简单，经验少的人可能会懵掉，没关系，我给大家找到了官网的描述。请看链接：

https://api.jquery.com/jQuery.ajax/

（讲真，我的英文有待提高，英文真的有必要好好学习，因为英文有时候决定我们开发能力的高度，而且很多和计算机相关的都是源自国外，永远不要丢下英文，保持一颗谦虚学习向上的心，利国利民的大事，响应共建社会主义文明社会的号召。）

以上参数后面四个都好搞，只是第一个参数，那可是我们的request参数，即url，这个参数也很关键，真的，否则会面瘫的，比如说是我。

请求geoserver返回json数据需要一个链接，即参数中的url，好，链接怎么搞呢？我们可以请求一个图层中的source，获取需要查询图层的url即可，用方法 getGetFeatureInfoUrl()获取。具体用法为 layer.getSource().getGetFeatureInfoUrl() （layer是你需要请求的图层对象，需要实例化。）。 

五个参数我们完美设置成功，可是问题出现了，google chrome的developer tools温馨的提示了一下我们：

Uncaught ReferenceError: parseResponse is not defined。

What?欺负我们没读过小学？我明明在jsonpCallback参数中定义的是successCallback方法名，怎么提示我是parseResponse方法名，而且还未定义，于是我把successCallback改为parseResponse。run again. yeah, it’s ok. But…我们总不能都用这个方法名把，万一我有很多想处理geoserver返回的json数据呢。问题总比办法多，不对，说反了。geoserver肯定提供了相关的方法。

通过大量阅读geoserver的官网文档，好家伙，一个明晃晃的一个format_options参数（该参数的详细介绍点击如下链接，官网）在那里晃荡着，但是讲真，我不知道怎么用它，尝试着将ajax方法中的 jsonp参数设置为 ‘format_options’，然后在jsonpCallback参数中设置为callback:successCallback  (这个successCallback就是我们之前自定义的，前面的callback是geoserver后台的要求而已，别搞混了。)，貌似完美解决，run
again. Error again. 那这个format_options参数究竟怎么用呢？想想，既然是我们要request geoserver服务器，那我们肯定要在url中动手脚咯，给它加一个format_options参数不就行了呗，但是又该怎么动手动脚呢，一直都是五好青年，小小的纠结。。。遇到问题就要解决问题嘛，太高挺胸，找方案，看下面。

前面提到getGetFeatureInfoUrl()方法，该方法需要四个参数，前三个不说，只说第四个params。探索过来，原来是在这里动手脚（我人生第一次猥琐就是被geoserver调戏而忍不住的）。在params中参数：”format_options”: “callback:getFeatureInfoData”。真是读经容易取经难啊，总算是解决关键问题了，好了，运行一次呗。success永远属于我，Oh yeah, 突然想到，唐僧的当年为了解决81难，是不是也是在无数个 日 日 夜夜的面瘫中渡过来的呢？

详细的format_options介绍请见链接，从geoserver官网中：

http://docs.geoserver.org/latest/en/user/services/wms/vendor.html#wms-vendor-parameters

最后还有几句话和一个问题想说想问，在设置好geoserver需要的参数之后，ajax中的jsonp参数好像并不需要了，但是剩下的参数需要，且jsonpCallback设置为successCallback方法名。

这个问题呢，我也没搞明白，也没有继续探索了。

问题：

不在params中设置format_options参数，而是设置ajax中jsonp参数为 ‘format_options’ 和jsonpCallback参数为 ‘callback:getFeatureInfoData’ ，按照常理，也应该可以的，但是，服务器还是提示上面提到的错误，这个差点让我又面瘫了，辛亏我鸡汁，放弃了。

jquery的ajax的jsonp参数到底怎么工作的。具体原因我没有详细查阅资料，如若有哪位仁人志士看完该文章可以与我私聊或留言，共创我们美好未来，不好意思，不搞基哒，我们讲道理。

再补一刀，本文略有粗糙，新手可能不适应，欢迎留言或私聊。少走弯路，为早日实现共产主义社会奋斗终身。

转载自：https://blog.csdn.net/lw19910913/article/details/73549491