一、同源策略及限制
源：域名? ? 端口號? ? 協議
同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的關鍵的安全機制。
Cookie、LocalStorage和IndexDB無法讀取
DOM無法獲得
Ajax請求不能發送
二、前端通信
Ajax? ? 同源通信
WebSocket? ? 不限制同源
CORS? ? 不限制同源
三、跨域通信
JSONP? ? 利用script標簽異步加載
? ? 1. 給服務端傳遞一個回調名稱
? ? 2. 在window以回調名稱注冊一個全局函數
? ? 3. 動態創建script標簽
? ? 4. 監聽腳本加載事件，響應onload，判斷onload響應是否成功， 刪除函數或變量
? ? 5. 在HTML文檔中增加此script標簽
Hash? ? URL#，快通信，頁面不刷新
????頁面A通過iframe或frame嵌入跨域頁面B
????A中偽代碼：
var B = document.getElementsByTarName('iframe');
B.src = B.src + '#' + 'data';
????B中偽代碼：
window.onhashchange = function () {
? ? var data = window.location.hash;
};
postMessage? ? HTML5新增
????窗口A(http://A.com)向跨域的窗口B(http://B.com)發送消息
window.postMessage('data', 'http://B.com);
????在窗口B中監聽
window.addEventListener('message', function (e) {
? ? console.log(e.origin);? ? //http://A.com
? ? console.log(e.source);? ? //窗口A的window
? ? console.log(e.data);
}, false);
WebSocket????新標準
var ws = new WebSocket('wss://echo.websocket.org');
ws.onopen = function (e) {
? ? console.log('Connection open ...');
? ? ws.send('Hello WebSockets!');
};
ws.onmessage = function (e) {
? ? console.log('Received Message: ' + e.data);
? ? ws.close();
}
ws.onclose = function (e) {
? ? console.log('Connection closed.');
};
CORS? ? 新標準，支持跨域通信的Ajax
????瀏覽器會攔截Ajax請求，如果這個Ajax請求是跨域的，會在HTTP請求頭中加一個origin
fetch(url [, options]);
fetch('/some/url', {
? ? method: 'get',
}).then(function (response) {
? ? //
}).catch(function (error) {
? ? //
});
