跨域通信的几种方式?

服务端代理

利用同源的服务端, 帮助我们转发请求到目标服务器, 再将返回的结果转交给前端页面.

CORS

浏览器自动处理, 需要后端配合.

JSONP

此种方式原理见另一篇文章.

页面hash

场景: 当前页面A通过iframe嵌入了跨域的页面B

// 页面A中的伪代码
var B = document.getElementsByTagName('iframe')[0];
B.src = B.src + '#' + 'data';

// 页面B中的伪代码
window.onhashchange = function () {
    var data = window.location.hash;
}

postMessage

场景: 窗口A(http: // A.com)向跨域的窗口B(http://B.com)发送信息

// 在窗口A中向B窗口发送信息
Bwindow.postMessage('datadata', 'http://B.com');

// 窗口B中监听
window.addEventListener('message', function (event) {
    console.log(event.origin);          // http://A.com
    console.log(event.source);          // Awindow
    console.log(event.data);            // data
}, false);

websocket

var ws = new WebSocket('wss://xxxxxxx');
ws.onopen = function (e) {}
ws.onmessage = function (e) {}
ws.onclose = function (e) {}