解決Geoserver請求跨域的幾種思路

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

1.背景描述

     跨域問題是瀏覽器同源安全制引發的特別常見的問題。不一樣前端語言針對跨域解決方法有所區別。好比Flex語言作跨域請求時，若是中間件存有跨域文件（crossdomain.xml）則能夠輕鬆實現跨域。

    而JS開發的前端，針對GET請求則又能夠經過JSONP方式解決。補充一下JSONP的原理：經過建立一個 script 標籤，將 src 設置爲目標請求，插入到 DOM中，服務器接受該請求並返回數據，數據一般被包裹在回調鉤子中。根據JSONP的實現原理，咱們能夠看到其沒法支持POST請求方式。

    回到咱們文章的主題，使用tomcat發佈了Geoserver，前端JS腳本經過常規JSONP的請求方式失效，此時如何實現跨域請求呢？

    這裏我總結兩種思路，一種是轉發代理方案，另外一種是中間件支持跨域共享機制（CORS）。

2.方案一：轉發代理

2.1基於Nginx的代理

    假設有A服務器和B服務器，用戶前端加載了A服務器的JS資源，而後該JS向B服務器後臺發送請求，此時發生了跨域。基於Nginx的解決方案則是，在C（或者A或者B或者其餘）服務器上搭建一個Nginx服務器，該服務器對A服務和B服務均作統一端口的代理，即前端經過同一IP：Port訪問A上和B上的資源，從而避免瀏覽器的跨域問題。

    方案示意圖爲：

 

2.2自定義實現代理轉發（基於A服務器）

2.2.1原理

    目前A服務器上的腳本想訪問B服務器上的服務會引起跨域，若是咱們將A服務器的腳本訪問轉移到A服務器上的後臺對B服務器後臺的訪問，則能夠規避跨域問題。

    方案示意圖爲：

 

2.2.2具體實現

    若是咱們的代碼層面僅僅是單獨針對某個請求讓其轉移至後臺，則其餘相似問題則沒法通用此解決方案。這裏咱們能夠設計一種通用型的解決方案：

    a.將全部須要走後臺避免跨域的請求統必定義爲http://IP:Port/name/proxy?Url=BServerUrl。

    b.後臺對應的proxy方法中獲取到Url後的參數，而且再次對Url後的參數進行傳遞參數的解析（BServerUrl中能夠用&包含正常參數）。

    c.轉發解析到的B請求，獲取返回結果再返回至前端。

    注意，在實現中，咱們還要同時考慮代理轉發的Get請求和Post請求方式：

 

3.方案二：中間件跨域共享機制（CORS）

3.1CORS原理簡介

    出於安全緣由，瀏覽器限制從腳本內發起的跨源HTTP請求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 這意味着使用這些API的Web應用程序只能從加載應用程序的同一個域請求HTTP資源，除非使用CORS頭文件。

    CORS的原理爲：跨域資源共享標準新增了一組 HTTP 首部字段，容許服務器聲明哪些源站有權限訪問哪些資源。另外，規範要求，對那些可能對服務器數據產生反作用的 HTTP 請求方法（特別是 GET 之外的 HTTP 請求，或者搭配某些 MIME 類型的 POST 請求），瀏覽器必須首先使用 OPTIONS 方法發起一個預檢請求（preflight request），從而獲知服務端是否容許該跨域請求。服務器確認容許以後，才發起實際的 HTTP 請求。在預檢請求的返回中，服務器端也能夠通知客戶端，是否須要攜帶身份憑證（包括 Cookies 和 HTTP 認證相關數據）。

    以上內容均摘抄於：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS。

3.2具體實現

    先下載CORS對應的Jar：

    <!-- cors-filter-->
    <dependency org="com.thetransactioncompany" name="java-property-utils" rev="1.10" conf="common-release->default;" />
    <dependency org="com.thetransactioncompany" name="cors-filter" rev="2.5" conf="common-release->default;"/>

    在Geoserver的Web.xml中加上以下配置：

 

    重啓Geoserver後測試。

    測試環境說明：在同一臺機器上測試，系統採用8081端口，Geoserver服務採用8080端口，不一樣端口一樣會致使跨域。測試結果爲跨域成功。

 

 

 

　　　　　　　　　　　　　　　　　　　　-----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                                           若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^