js 跨域訪問問題解決方法

什麼引發了ajax不能跨域請求的問題？

ajax自己其實是經過XMLHttpRequest對象來進行數據的交互，而瀏覽器出於安全考慮，不容許js代碼進行跨域操做，因此會警告。

 

有什麼完美的解決方案麼？

解決方案有很多，可是隻能是根據本身的實際狀況來選擇。

 

跨域的安全限制都是指瀏覽器端來講的，服務器端是不存在跨域安全限制的。因此針對這2種狀況衍生出2類跨域解決方案，一類是服務器端作中轉相似代理方式，一類是js處理瀏覽器端的真正跨域訪問。

 

具體狀況有:

1.   本域和子域的相互訪問: www.aa.com和book.aa.com 用document.domain = "aa.com";
2. 本域和其餘域的相互訪問: www.aa.com和www.bb.com 用 XMLHttpRequest訪問代理，既服務器端代理方式
3. 本域和其餘域的相互訪問: www.aa.com和www.bb.com 用 JS建立動態腳本，<script>標籤的src屬性實現跨域訪問

 

解決方法：

 

1. 若是想作到數據的交互，那麼www.aa.com和book.aa.com必須由你來開發才能夠。能夠將book.aa.com用iframe添加到 www.aa.com的某個頁面下,在www.aa.com和iframe裏面都加上document.domain = "aa.com"，這樣就能夠統一域了，能夠實現跨域訪問。就和平時同一個域中鑲嵌iframe同樣，直接調用裏面的JS就能夠了。
2. 這種情形是最常常遇到的，也是用的最多的了。就是www.aa.com和www.bb.com你只能修改一個，也就是另一個是別人的，人家告訴你你要取得數據就訪問某某鏈接參數是什麼樣子的，最後返回數據是什麼格式的。而你須要作的就是讓你的服務器端充當中轉代理，讓服務器去別人的網站上取得數據，再返回給瀏覽器端。

服務器端充當中轉代理方式有不少能夠由服務器端程序實現，也能夠修改服務器配置實現，下面舉例Apache重寫（mod_rewrite proxy模式）方式： 在Apache的安裝目錄下的conf/httpd.conf 文件添加以下語句：

?

LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so LoadModule rewrite_module modules/mod_rewrite.so RewriteEngine On RewriteRule ^/_proxy/(.*)$ http:// $1 [P,L]

 

 

這樣就能夠把其餘網站的url映射爲本服務器的/_proxy/目錄下面, 例如能夠這麼訪問百度http://html.duqn.com/_proxy/www.baidu.com

 

 

 這個的區別就是請求是使用<script>標籤來請求的，這個要求也是兩個域都是由你來開發才行。原理就是JS文件注入，在本域內的aa.com 內生成一個JS標籤，它的SRC指向請求的另一個域bb.com的某個頁面b，b返回數據便可，能夠直接返回JS的代碼。由於script的src屬性是能夠跨域的。具體看代碼，這個也比較簡單。

aa.com/a.jsp

?

<script type= "text/javascript" > function myTest(data) {      alert(data); } </script> <script type= "text/javascript" src= "http://www.bb.com/index!getData.action?jsoncallback=myTest" ></script>

 

 

bb.com/b.jsp頁面代碼以下：

 

?

$(param.jsoncallback)({ "name" : "Zhang Huihua" , "QQ" : "350863780" })

 

b.jsp頁面經過$(param.jsoncallback)獲得瀏覽器端隨後要回調的js function name:myTest

實際上客戶端接收到的response以下：myTest({"name": "Zhang Huihua", "QQ": "350863780"})

 

 

 

jQuery瀏覽器端跨域訪問

目前jQuery $.ajax()支持get方式的跨域，這實際上是採用jsonp的方式來完成的。其原理就是上面第三種方式，<script>標籤的src屬性實現跨域訪問

真實案例代碼以下:

?

$.ajax({      url: http: //跨域的dns/index!searchJSONResult.action,      type: "GET" ,      dataType: 'jsonp' ,      data: {name:」ZhangHuihua」},      timeout: 5000,      success: function (json) { //客戶端jquery預先定義好的callback函數,成功獲取跨域服務器上的json數據後,會動態執行這個callback函數          alert(json);      },      error: function (xhr, ajaxOptions, thrownError){            alert( "Http status: " + xhr.status + " " + xhr.statusText + "\najaxOptions: " + ajaxOptions + "\nthrownError:" +thrownError + "\n" +xhr.responseText);      }   });

注意:

?

$.getJSON( "http://跨域的dns/index!searchJSONResult.action?name1=" +value1+ "&jsonCallback=?" , function (json){      // 執行代碼 });

這種方式實際上是上例$.ajax({..}) api的一種高級封裝,有些$.ajax api底層的參數就被封裝而不可見了.

這樣,jquery就會拼裝成以下的url get請求

http:// 跨域的 dns/index!searchJSONResult.action?&jsonCallback=jsonp1236827957501&_=1236828192549&name=ZhangHuihua

 

jsonCallback自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也能夠寫"?"，jQuery會自動爲你處理數據.

 

在響應端(http://跨域的dns/index!searchJSONResult.action),

經過 jsoncallback = request.getParameter("jsoncallback") 獲得jquery端隨後要回調的js function name:jsonp1236827957501

而後 response的內容爲一個Script Tags:"jsonp1236827957501("+按請求參數生成的json數組+")";

jquery就會經過回調方法動態加載調用這個js tag:jsonp1236827957501(json數組);

這樣就達到了跨域數據交換的目的.

 

jsonp的最基本的原理是:動態添加一個<script>標籤，而script標籤的src屬性是沒有跨域的限制的。這樣說來,這種跨域方式其實與ajax XmlHttpRequest協議無關了.

這樣其實"jQuery AJAX跨域問題"就成了個僞命題了,jquery $.ajax方法名有誤導人之嫌.

若是設爲dataType: 'jsonp', 這個$.ajax方法就和ajax XmlHttpRequest沒什麼關係了,取而代之的則是JSONP協議.

JSONP是一個非官方的協議，它容許在服務器端集成Script tags返回至客戶端，經過javascript callback的形式實現跨域訪問

JSONP即JSON with Padding。因爲同源策略的限制，XmlHttpRequest只容許請求當前源（域名、協議、端口）的資源。若是要進行跨域請求，

咱們能夠經過使用html的script標記來進行跨域請求，並在響應中返回要執行的script代碼，其中能夠直接使用JSON傳遞javascript對象。

這種跨域的通信方式稱爲JSONP。

jsonCallback 函數jsonp1236827957501(....): 是瀏覽器客戶端註冊的，獲取跨域服務器上的json數據後，回調的函數

 

Jsonp原理：

首先在客戶端註冊一個callback (如:'jsoncallback'), 而後把callback的名字(如:jsonp1236827957501)傳給服務器。

此時，服務器先生成 json 數據。

而後以 javascript 語法的方式，生成一個function , function 名字就是傳遞上來的參數 'jsoncallback'的值 jsonp1236827957501 .

最後將 json 數據直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。

客戶端瀏覽器，解析script標籤，並執行返回的 javascript 文檔，此時javascript文檔數據,做爲參數，

傳入到了客戶端預先定義好的 callback 函數(如上例中jquery $.ajax()方法封裝的的success: function (json))裏.（動態執行回調函數）

能夠說jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空間就是大量採用這種方式來實現跨域數據交換的) .JSONP是一種腳本注入(Script Injection)行爲,因此也有必定的安全隱患.

 

注意,jquey是不支持post方式跨域的.

雖然採用post +動態生成iframe是能夠達到post跨域的目的,但這樣作是一個比較極端的方式,不建議採用.

也能夠說get方式的跨域是合法的,post方式從安全角度上,被認爲是不合法的, 萬不得已仍是不要劍走偏鋒..

瀏覽器端跨域訪問的需求看來也引發w3c的注意了,看資料說html5 WebSocket標準支持跨域的數據交換,應該也是一個未來可選的跨域數據交換的解決方案.