什么是跨域,为什么浏览器会禁止跨域，以及实现跨域的几种方式
首先我們來想一想
? ? ? ? ? ? ? 為什么會有跨域這個名詞的出現呢?
? ? ? ? ? ? ? 跨域又是什么呢?為何要跨域?
? ? ? ? ? ? ? 瀏覽器的同源策略又是什么?怎么解決?
? ? ? ? ? ? ? jsonp又是什么?
? ? ? ? ? ? ? 跨域的原理又是什么呢?
名詞解釋:
?
1、什么是跨域
跨域的產生來源于現代瀏覽器所通用的‘同源策略’，所謂同源策略，是指只有在地址的：
1. 協議名 https，http
2. 域名 http://a.study.cn http://study.cn
3. 端口名 http://study.cn:8080/json/jsonp/jsonp.html study.cn/json/jsonp/jsonp.html
均一樣的情況下，才允許訪問相同的cookie、localStorage或是發送Ajax請求等等。若在不同源的情況下訪問，就稱為跨域。
例如a.cn下面的js不能調用b.cn中的js,對象或數據(因為a.cn和b.cn是不同域),所以跨域就出現了.
?
同源策略:
請求的url地址,必須與瀏覽器上的url地址處于同域上,也就是域名,端口,協議相同.
比如:我在本地上的域名是study.cn,請求另外一個域名一段數據
這個時候在瀏覽器上會報錯:
這個就是同源策略的保護,如果瀏覽器對javascript沒有同源策略的保護,那么一些重要的機密網站將會很危險~
請求地址 形式 結果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' οnlοad='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請求，然后收到的數據我們也可以獲得了。
?
轉載于:https://www.cnblogs.com/liubingyjui/p/10804785.html
總結
以上是生活随笔為你收集整理的什么是跨域,为什么浏览器会禁止跨域，以及实现跨域的几种方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： P2085 最小函数值 堆
- 下一篇： 前端知识点回顾——HTML，CSS篇