本文基於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引數到底怎麼工作的。具體原因我沒有詳細查閱資料，如若有哪位仁人志士看完該文章可以與我私聊或留言，共創我們美好未來，不好意思，不搞基噠，我們講道理。

再補一刀，本文略有粗糙，新手可能不適應，歡迎留言或私聊。少走彎路，為早日實現共產主義社會奮鬥終身。