跨域限制原因及常見跨域方法

跨域

游覽器的同源策略(瀏覽器對JavaScript施加的安全限制)(也就是說服務端不受限制)

同源策略：

1.DOM同源策略：禁止對不同源頁面DOM進行操作。這里主要場景是iframe跨域的情況，不同域名的iframe是限制互相訪問的。

2.XmlHttpRequest同源策略：禁止使用XHR對象向不同源的服務器地址發起HTTP請求。

定義：協議、域名、端口任意一個不同，就產生跨域

PS:協議不同 如http、https

跨域限制的原因：

1.AJAX同源策略主要用來防止CSRF攻擊。如果沒有AJAX同源策略，相當危險，我們發起的每一次HTTP請求都會帶上請求地址對應的cookie，那么可以做如下攻擊：用戶登錄了自己的銀行頁面 http://mybank.com，http://mybank.com向用戶的cookie中添加用戶標識。用戶瀏覽了惡意頁面 http://evil.com。執行了頁面中的惡意AJAX請求代碼。http://evil.com向http://mybank.com發起AJAX HTTP請求，請求會默認把http://mybank.com對應cookie也同時發送過去。銀行頁面從發送的cookie中提取用戶標識，驗證用戶無誤，response中返回請求數據。此時數據就泄露了。而且由於Ajax在后台執行，用戶無法感知這一過程。

2.DOM同源策略也一樣，如果iframe之間可以跨域訪問，可以這樣攻擊：做一個假網站，里面用iframe嵌套一個銀行網站 http://mybank.com。把iframe寬高啥的調整到頁面全部，這樣用戶進來除了域名，別的部分和銀行的網站沒有任何差別。這時如果用戶輸入賬號密碼，我們的主網站可以跨域訪問到http://mybank.com的dom節點，就可以拿到用戶的輸入了，那么就完成了一次攻擊。

解決跨域的方法：

1.跨域資源共享(CORS)
服務端通過設置

//指定允許其他域名訪問
'Access-Control-Allow-Origin:*'//或指定域
//響應類型
'Access-Control-Allow-Methods:GET,POST'
//響應頭設置
'Access-Control-Allow-Headers:x-requested-with,content-type'

2.jsonp

由回調函數和數據

<script type="text/javascript">
    function dosomething(jsondata){
        //處理獲得的json數據
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

<?php
$callback = $_GET['callback'];//得到回調函數名
$data = array('a','b','c');//要返回的數據
echo $callback.'('.json_encode($data).')';//輸出
?>

缺點：只支持GET請求

3.H5 postMessage方法

window.postMessage(message,targetOrigin) 

4.websocket

需要服務器支持

5.正向代理服務器

實例Node.js代理服務器