1. 程式人生 > >什麼是跨域?以及如何解決跨域問題?

什麼是跨域?以及如何解決跨域問題?

首先我們來想一想

              為什麼會有跨域這個名詞的出現呢?

              跨域又是什麼呢?為何要跨域?

              瀏覽器的同源策略又是什麼?怎麼解決?

              jsonp又是什麼?

              跨域的原理又是什麼呢?

名詞解釋:

跨域:

瀏覽器對於javascript的同源策略的限制,例如a.cn下面的js不能呼叫b.cn中的js,物件或資料(因為a.cn和b.cn是不同域),所以跨域就出現了.

上面提到的,同域的概念又是什麼呢??? 簡單的解釋就是相同域名,埠相同,協議相同

 

同源策略:

請求的url地址,必須與瀏覽器上的url地址處於同域上,也就是域名,埠,協議相同.

比如:我在本地上的域名是study.cn,請求另外一個域名一段資料

這個時候在瀏覽器上會報錯:

這個就是同源策略的保護,如果瀏覽器對javascript沒有同源策略的保護,那麼一些重要的機密網站將會很危險~

study.cn/json/jsonp/jsonp.html
 請求地址  形式  結果
 http://study.cn/test/a.html 同一域名,不同資料夾  成功
 http://study.cn/json/jsonp/jsonp.html 同一域名,統一資料夾  成功
 http://a.study.cn/json/jsonp/jsonp.html 不同域名,檔案路徑相同  失敗
 http://study.cn:8080/json/jsonp/jsonp.html  同一域名,不同埠  失敗
 https://study.cn/json/jsonp/jsonp.html  同一域名,不同協議    失敗

 

 

 

 

 

jsonp:

jsonp 全稱是JSON with Padding,是為了解決跨域請求資源而產生的解決方案,是一種依靠開發人員創造出的一種非官方跨域資料互動協議。

一個是描述資訊的格式,一個是資訊傳遞雙方約定的方法。

jsonp的產生:

1.AJAX直接請求普通檔案存在跨域無許可權訪問的問題,不管是靜態頁面也好.

2.不過我們在呼叫js檔案的時候又不受跨域影響,比如引入jquery框架的,或者是呼叫相片的時候

3.凡是擁有scr這個屬性的標籤都可以跨域例如<script><img><iframe>

4.如果想通過純web端跨域訪問資料只有一種可能,那就是把遠端伺服器上的資料裝進js格式的檔案裡.

5.而json又是一個輕量級的資料格式,還被js原生支援

6.為了便於客戶端使用資料,逐漸形成了一種非正式傳輸協議,人們把它稱作JSONP,該協議的一個要點就是允許使用者傳遞一個callback 引數給服務端,

demo1:基於script標籤實現跨域

舉個例子:我在http://study.cn/json/jsonp/jsonp_2.html下請求一個遠端的js檔案

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var message = function(data) {
        alert(data[1].title);
    };
</script>

<script type="text/javascript" src="http://web.cn/js/message.js"></script>
</head>
<body>
<div id='testdiv'></div>
</body>
</html>

遠端的message.js檔案是

message([
     {"id":"1", "title":"天津新聞聯播,雷人搞笑的男主持人"},
     {"id":"2", "title":"樓市告別富得流油 專家:房價下跌是大概率事件"},
     {"id":"3", "title":"法國人關注時事 八成年輕人每天閱讀新聞"},
     {"id":"4", "title":"新聞中的歷史,歷史中的新聞"},
     {"id":"5", "title":"東陽新聞20140222"},
     {"id":"6", "title":"23個職能部門要增加新聞釋出頻次"},
     {"id":"7", "title":"《貴州新聞聯播》 中國美麗鄉村"},
     {"id":"8", "title":"朝韓離散家屬團聚首輪活動結束"},
     {"id":"9", "title":"索契冬奧會一天曝出兩例興奮劑事件"},
     {"id":"10", "title":"今天中國多地仍將出現中度霾"}
 ]);

這個時候我們得到的相應頭是:

這樣就實現跨域成功了,因為服務端返回資料時會將這個callback引數(message)作為函式名來包裹住JSON資料,這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。

demo2: 基於script標籤實現跨域

讓遠端js知道它應該呼叫的本地函式叫什麼名字,只要服務端提供的js指令碼是動態生成的就好了,這樣前臺只需要傳一個callback引數過去告訴服務端,我需要XXX程式碼,於是服務端就會得到相應了.

例如 在http://study.cn/json/jsonp/jsonp_3.html頁面請求 http://192.168.31.137/train/test/jsonpthree

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var messagetow = function(data){
        alert(data);
    };
    var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow";
    var script = document.createElement('script'); 
    script.setAttribute('src', url); 
    document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>

得到的響應頭是:

demo3:  基於jquery跨域

那麼如何用jquery來實現我們的跨域呢???jquery已經把跨域封裝到ajax上了,而且封裝得非常的好,使用起來也特別方便

如果是一般的ajax請求:

$.ajax({
        url:'http://192.168.31.137/train/test/testjsonp',
        type : 'get',
        dataType : 'text',
        success:function(data){
            alert(data);
        },
        error:function(data){
            alert(2);
        }        
    });

那麼在瀏覽器中會報錯:

jsonp形式的ajax請求:並且通過get請求的方式傳入引數,注意:跨域請求是隻能是get請求不能使用post請求

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var name = 'chenshishuo';
    var sex = 'man';
    var address = 'shenzhen';
    var looks = 'handsome ';
     $.ajax({
         type : 'get',
         url:'http://192.168.31.137/train/test/testjsonp',
        data : {
            name : name,
            sex : sex,
            address : address,
            looks : looks,
        },
        cache :false,
        jsonp: "callback",
        jsonpCallback:"success",
        dataType : 'jsonp',
        success:function(data){
            alert(data);
        },
        error:function(data){
            alert('error');
        }        
    });
});
</script>
</head>
<body>
<input id='inputtest' value='546' name='inputtest'>
<div id='testdiv'></div>
</body>
</html>
jsonp 傳遞給請求處理程式或頁面的,用以獲得jsonp回撥函式名的引數名(預設為:callback)
jsonpCallback 自定義的jsonp回撥函式名稱,預設為jQuery自動生成的隨機函式名

看看請求頭和相應頭吧

請求頭:jquery會自動帶入callback引數,當服務端獲取到這個引數後,返回回來.(響應頭)

現在是不是明白了跨域的基本原理,和基本的使用方法呢??

上面我們說到img中的src可以自動呼叫遠端圖片的(這個比較簡單我在這裡就不說了)

還有ifram請求:

基於iframe實現的跨域要求兩個域具有aa.xx.com,bb.xx.com 這種特點,

也就是兩個頁面必須屬於一個基礎域(例如都是xxx.com),使用同一協議和同一埠,這樣在兩個頁面中同時新增document.domain,就可以實現父頁面呼叫子頁面的函式

要點就是 :通過修改document.domain來跨子域

demo4: 通過iframe來跨子域

http://a.study.cn/a.html 請求 http://b.study.cn/b.html

在a.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
        <script type="text/javascript">
            document.domain = 'study.cn';
            function test() {
                alert(document.getElementById('a').contentWindow);
            }
        </script>
</head>
<body>
    <iframe id='a' src='http://b.study.cn/b.html' onload='test()'>
</body>
</html>

 在b.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
document.domain = 'study.cn';
</script>
</head>
<body>
    我是b.study.cn的body
</body>
</html>

 執行效果截圖:

我們就可以通過js訪問到iframe中的各種屬性和物件了

如果你想在http://a.study.cn/a.html頁面中通過ajax直接請求頁面http://b.study.cn/b.html,即使你設定了相同的document.domain也還是不行的.

所以修改document.domain的方法只適用於不同子域的框架(父類與子類)間的互動。

如果想通過使用ajax的方法去與不同子域間的資料互動或者是js呼叫,只有兩種方法,一種是使用jsonp的方法外,還有一種是使用iframe來做一個代理。

原理就是讓這個 iframe載入一個與你想要通過ajax獲取資料的目標頁面處在相同的域的頁面,所以這個iframe中的頁面是可以正常使用ajax去獲取你要的資料 的,

然後就是通過我們剛剛講得修改document.domain的方法,讓我們能通過js完全控制這個iframe,這樣我們就可以讓iframe去發 送ajax請求,然後收到的資料我們也可以獲得了。

 

上面的所有知識點,應該可以解決第一開始提出的問題了吧.