作為一個前端工作者,跨域問題應該是很常見的,處理方式有很多,下邊來說一說我用到過的處理方式。
1.什么是跨域
只要協議、域名、端口有任何一個不同,都被當做不同的域,js不能在不同的域之間進行通信和傳輸數據。
2.跨域的情況
(1) 用ajax向不同的域請求數據
(2) 通過js獲取頁面中不同域的框架中的數據(常見iframe)
瀏覽器都有一個同源策略,其限制之一就是不能通過ajax的方法去請求不同源中的文檔,限制之二是瀏覽器中不同域的框架之間是不能進行js的交互操作的。
3.跨域的方法
(1) jsonp跨域
原理:創建<script>標簽,利用src屬性跨域(src屬性可以跨域),同樣<img>也可以處理跨域
舉個栗子:
test.html -----> http://a.hao123.com/test.html
ajaxData -----> http://b.hao123.com/list
test.html訪問ajaxData需要跨域
<script src="http://b.haha.com/list?callback=dosomething"></script>
<script type="text/javascript">
function dosomething(jsondata) {
// 處理獲取的json數據
}
</script>
通過一個script標簽引入一個js文件,當js文件載入成功后會把需要的json數據作為參數傳入URL中指定的函數并執行此函數,因為ajaxData被當作一個js文件來引入,所以其返回的數據必須是一個能執行的js文件,所以需要服務端的配合才行。
局限性:<1> 需要服務端配合做處理
<2> jsonp只支持“get”請求,不支持“post”請求
(2) document.domain來跨越子域
原理:設置相同的主域
舉個栗子:
有一個頁面,它的地址是 http://a.hao123.com/test.html , 在這個頁面里面有一個iframe,它的src是 http://b.hao123.com/test.html , 很顯然,這個頁面與它里面的iframe框架是不同域的,所以我們是無法通過在頁面中書寫js代碼來獲取iframe中的東西的
<iframe src="http://b.hao123.com/test.html" onload="test()" id="iframe"></iframe>
<script type="text/javascript">
document.domain = "haha.com";
function test() {
// 獲取iframe中的數據
var cont = document.getElementById('iframe').contentWindow;
}
</script>
注意: <1> document.domain的設置是有限制的,我們只能把document.domain設置成自身或更高一級的父域,且主域必須相同。
<2> 修改document.domain的方法只適用于不同子域的框架間的交互,對ajax訪問的不適用。
(3) 隱藏iframe做代理跨域
如果你想通過ajax的方法去與不同子域的頁面交互,除了使用jsonp的方法外,還可以用一個隱藏的iframe來做一個代理。
原理:讓這個隱藏的iframe載入一個與你想要通過ajax獲取數據的目標頁面處在相同的域的頁面,所以這個iframe中的頁面是可以正常使用ajax去獲取你要的數據的,然后就是通過修改document.domain的方法,讓我們能通過js完全控制這個iframe,這樣我們就可以讓iframe去發送ajax請求,然后收到的數據我們也可以獲得了。
還是方法1中的例子,在test.html中訪問ajaxData
<iframe src="http://b.hao123.com/ajaxProxy.html" onload="test()" id="iframe" style="display:none"></iframe>
<script type="text/javascript>
// 設置相同的主域
document.domain = 'hao123.com';
iframe = document.getElementById('iframe');
iframe.addEventListener('load',function(e) {
// 1.發送ajax請求數據
// 2.獲取iframe中的數據
var cont = iframe.contentWindow;
// 3.數據的處理
})
</script>
在梳理一下第3種
<1> test.html中設置一個隱藏的iframe,其src為http://b.hao123.com/ajaxProxy.html,與ajaxData處于相同域,在iframe中訪問ajaxData獲取返回的數據
<2> 再利用第二種方法去獲取iframe中的數據進行處理