原文鏈接:http://blog.csdn.net/LZJLZJLZJLZJLZJLZJ/article/details/52623270
Ajax可以異步請求后台並且在不刷新整個網頁的情況下可以對網頁的局部內容進行刷新,但是在開發的過程中,有可能需要訪問另外一個域的數據,那么就會遇到Ajax的跨域問題。對於其它域的信息,Ajax是不能直接訪問的,這是因為基於安全的考慮,Ajax只能訪問本地的資源,而不能跨域訪問。下面列出了一些屬於跨域的情況(圖片摘錄於互聯網):
存在跨域問題,那么自然也存在解決辦法。目前比較業界比較常用的有三種解決辦法:
- 代理
- JSONP
- XHR2(XMLHttpRequest Level 2)
下面將通過例子演示這三種方法實現Ajax跨域訪問。
首先介紹一下用到的實驗環境:
實驗用到兩個tomcat服務器,這兩個tomcat服務器的端口號分別是8080和8888,這兩個服務器均部署了一套基於Struts、hibernate、spring架構的Java項目;這兩個服務器都在本地機器中,本地機器的ip地址為:172.168.50.112。為了敘述方便,我們把端口號為8080的服務器稱作服務器一,端口號為8888的服務器稱作服務器二。
現在服務器一需要訪問服務器二的某一個后台接口。對於這一請求,很明顯是屬於跨域請求,因為這兩個服務器的端口號不一樣,下面將分別介紹以上三種實現跨域請求的例子。
方法一:
代理。既然Ajax無法訪問跨域資源,但是后台代碼卻可以。所以代理就是讓Ajax請求請求本域的后台代碼,后台代碼訪問跨域的資源,過程如下:
服務器一有一個Ajax請求,請求服務器二AjaxTestAction類下proxyAjax方法。這是無法訪問的,因為服務器二和服務器一不在同一個域下。所以需要通過在服務器一增加一個代理類來訪問服務器二的資源,對應的代碼如下:
服務器一的前端代碼:
服務器一的后端代碼,即代理類:
服務器二的后端代碼:
方法二:
JSONP技術(只支持GET請求)。利用Ajax請求請求不同域的資源,會受到安全訪問的限制,不能實現跨域訪問,但是script 標簽是一個例外,通過script標簽訪問不同域的資源則不受限制。所以JSONP技術就是利用script標簽請求遠程服務器資源,訪問遠程服務器資源時通過指定回調的js方法名,當遠程服務器執行完之后,可以調用指定的js回調方法,回調js方法時,可以把遠程服務器資源作為參數傳到本地服務器中。
要演示這種方法實現跨域訪問,只需要在服務器一中定義一個script標簽,並且把這個script標簽的src設成服務器二的訪問地址,並指定回調的js函數。具體的代碼如下:
服務器一的前端代碼:
服務器二的后端代碼:
這種放方法實現跨域訪問代碼量不算太多,其主要是通過sript標簽訪問遠程服務器的資源,但是也正因為通過script訪問,所以這種技術並不屬於ajax訪問,只是其可以實現跨域訪問而已。
方法三:
XMLHttpRequest Level 2。這種技術是HTML5提供的一種技術,其通過在遠程服務器設置response的Header來實現的一種跨域訪問技術。當利用這種技術時,如果在前端的ajax請求設置了請求頭,或者對請求或者響應設置了不同的信息,都有可能影響跨域訪問,具體怎樣影響可以參照這個網址:https://github.com/hstarorg/HstarDoc/blob/master/%E5%89%8D%E7%AB%AF%E7%9B%B8%E5%85%B3/CORS%E8%AF%A6%E8%A7%A3.md
下面展示一下我本地測試的的代碼樣例:
服務器一的前端代碼:
服務器二的后台代碼:
如果只允許某一台機器可以跨域訪問,可以這樣設置: