關於跨域,以及跨域的幾種方式

時間 2019-11-11

標籤關於以及幾種方式简体版

原文原文鏈接

首先咱們來想想javascript

爲何會有跨域這個名詞的出現呢?html

跨域又是什麼呢?爲什麼要跨域?java

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

jsonp又是什麼?web

跨域的原理又是什麼呢?ajax

名詞解釋:json

跨域:跨域

瀏覽器對於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文件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 
 7 <script type="text/javascript">
 8     var message = function(data) {
 9         alert(data[1].title);
10     };
11 </script>
12 
13 <script type="text/javascript" src="http://web.cn/js/message.js"></script>
14 </head>
15 <body>
16 <div id='testdiv'></div>
17 </body>
18 </html>

遠程的message.js文件是

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

這個時候咱們獲得的相應頭是:

這樣就實現跨域成功了,由於服務端返回數據時會將這個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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 
 7 <script type="text/javascript">
 8     var messagetow = function(data){
 9         alert(data);
10     };
11     var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow";
12     var script = document.createElement('script'); 
13     script.setAttribute('src', url); 
14     document.getElementsByTagName('head')[0].appendChild(script);
15 </script>
16 </head>
17 <body>
18 </body>
19 </html>

獲得的響應頭是:

demo3: 基於jquery跨域

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

若是是通常的ajax請求:

 1     $.ajax({
 2         url:'http://192.168.31.137/train/test/testjsonp',
 3         type : 'get',
 4         dataType : 'text',
 5         success:function(data){
 6             alert(data);
 7         },
 8         error:function(data){
 9             alert(2);
10         }        
11     });

那麼在瀏覽器中會報錯:

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" src="./js/jquery.js"></script>
 7 <script type="text/javascript">
 8 $(document).ready(function(){
 9     var name = 'chenshishuo';
10     var sex = 'man';
11     var address = 'shenzhen';
12     var looks = 'handsome ';
13      $.ajax({
14          type : 'get',
15          url:'http://192.168.31.137/train/test/testjsonp',
16         data : {
17             name : name,
18             sex : sex,
19             address : address,
20             looks : looks,
21         },
22         cache :false,
23         jsonp: "callback",
24         jsonpCallback:"success",
25         dataType : 'jsonp',
26         success:function(data){
27             alert(data);
28         },
29         error:function(data){
30             alert('error');
31         }        
32     });
33 });
34 </script>
35 </head>
36 <body>
37 <input id='inputtest' value='546' name='inputtest'>
38 <div id='testdiv'></div>
39 </body>
40 </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:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6         <script type="text/javascript">
 7             document.domain = 'study.cn';
 8             function test() {
 9                 alert(document.getElementById('a').contentWindow);
10             }
11         </script>
12 </head>
13 <body>
14     <iframe id='a' src='http://b.study.cn/b.html' onload='test()'>
15 </body>
16 </html>

在b.html:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 
 7 <script type="text/javascript">
 8 document.domain = 'study.cn';
 9 </script>
10 </head>
11 <body>
12     我是b.study.cn的body
13 </body>
14 </html>