前言
在前后端通信的時候，由于瀏覽器的同源策略限制，很多時候我們都有跨域的需求，而不同的跨域方法，適用于不同的跨域場景。
JSONP
JSONP的原理就是創建一個script標簽，從而借助這個腳本請求去實現跨域的，因為請求靜態js文件不受同源策略的限制。
它只支持get方法跨域，而且不方便監聽錯誤和HTTP狀態碼等
let script = document.createElement('script')
let url = ""
//加上回調方法好拿到數據
script.src = `${url}?callback=callback`
//添加這個腳本到文檔里去
document.head.appendChild(script)
function callback(data){
console.info("jsonp",data)
}
這里有一點要注意，使用了jsonp的話打開chrome的network抓包會發現response是callback&&callback(...),這就是jsonp中的p(padding)的含義：填充進腳本的json。
CORS參考資料
目前最常用的跨域解決方案
服務端設置Access-Control-Allow-Origin字段
postmessage
HTML5新增的跨域方案
// 窗口A(http:A.com)向跨域的窗口B(http:B.com)發送信息
window.postMessage('data', 'http://B.com');
// 在窗口B中監聽
window.addEventListener('message', function (event) {
console.log(event.origin);
console.log(event.source);
console.log(event.data);
}, false);
通常也是結合iframe用，相關文章
WebSocket參考資料
獨樹一幟
var ws = new WebSocket('wss://echo.websocket.org');
ws.onopen = function (evt) {
console.log('Connection open ...');
ws.send('Hello WebSockets!');
};
ws.onmessage = function (evt) {
console.log('Received Message: ', evt.data);
ws.close();
};
ws.onclose = function (evt) {
console.log('Connection closed.');
};
url的hash
適用于簡單的場景
// 在A窗口中：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
// 在B(iframe)窗口中：
window.onhashchange = function () {
var data = window.location.hash;
};
