跨域（入門）

JS跨域

同源策略

所謂「同源」，就是「三個相同」：協議相同、域名相同、端口相同。
同源策略的目的：保證用戶信息的安全，防止惡意網站竊取數據。
若是是非同源，共有三種行爲會受到限制：
1.Cookie、LocalStorage、IndexDB沒法讀取；
2.DOM沒法獲取；（主要場景是ifame跨域的狀況，不一樣域名的iframe是限制互相訪問的）
3.AJAX請求不能發送；

跨域的解決方法

跨域資源共享（CORS）

html5新增的標準，IE10如下不支持。
CORS是W3C的標準，全稱是跨域資源共享(Cross-Origin Resource sharing)。CORS定義了必須在訪問跨域資源時，瀏覽器與服務器應該如何溝通。它的思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是成功仍是失敗。
使用：
對於前端，咱們仍是正常使用xhr對象發送ajax請求。惟一須要注意的是，咱們須要設置xhr中的withCredentials爲true，否則沒法傳遞cookie，xhr.withCredentials=true;
對於服務端，須要在response header中設置以下兩個字段：
Access-Control-Allow-Origin:http://www.yourhost.com
Access-Control-Allow-Credentials:true

JSONP

JSONP的原理：在頁面上引入不一樣域上的js腳本文件是能夠的，因此能夠經過動態建立script標籤，而後利用src屬性進行跨域。經過將前端方法做爲參數傳遞到服務器端，而後由服務器端注入參數以後再返回，實現服務器端向客戶端通訊。

注：src請求都必須是get方法，就像你在瀏覽器地址欄輸入地址回車同樣。

function fun(fata){
    console.log(data);
}
var body=document.getElementsByTagName('body')[0];
var script=document.getElement('script');
script.type='text/javascript';
script.src='demo.js?callback=fun';
body.appendChild(script);
//返回的js腳本直接會執行，就執行已經定義好的fun函數，而且把數據傳入進來。
fun({"name":"name"})

CORS VS JSONP
都能解決ajax直接請求普通文件存在跨域無權訪問的問題
1.JSONP只能實現get請求，而CORS支持全部類型的http請求
2.使用CORS，開發者可使用普通的XHR發起請求和得到數據，比起JSONP有更好的錯誤處理
3.JSONP主要被老的瀏覽器支持，它們每每不支持CORS，而現代瀏覽器都支持CORS

document.domain

修改document.domain的方法只適用於不一樣子域的框架間的交互。
對於主域名相同，而子域名不一樣的狀況，可使用document.domain來跨域 這種方式很是適用於iframe跨域的狀況，好比：
a頁面地址爲 http://a.yourhost.com 
b頁面爲 http://b.yourhost.com。
這樣就能夠經過分別給兩個頁面設置 document.domain = http://yourhost.com 來實現跨域。
以後，就能夠經過 parent 或者 window['iframename']等方式去拿到iframe的window對象了。

postMessage

postMessage是html5的一個API，能夠解決多窗口、窗口和iframe之間的消息通訊的跨域問題。
postmessage(data, origin)，其中data指的就是須要傳遞的數據，origin指的是具體的數據源地址(包括協議+域名+端口)。而後window對message事件進行監聽。

<iframe id="iframe" src="http://next.com/next.html"></iframe>
<input id="msg" type="text" placeholder="輸入要發送的消息">
<button id="send">發送</button>

document.getElementById('send').onclick = function() {
    var msg = document.getElementById('msg').value;
    var iframeWindow = document.getElementById('iframe').contentWindow;
    iframeWindow.postMessage(msg,"http://next.com/next.html");
}

<div>
    <h2>如下是接收到的消息：</h2>
    <section id="msg">
         
    </section>
</div>

window.addEventListnerner('message',handle,false){//window對message時間監聽
}
function handle(event){
    if(event.origin==='http://source.com'){
        document.getElementById('msg').innerHTML=event.data;
    }
}