跨域通信常用的几种方式
1、JSONP
2、WebSocket
3、CORS
4、Hash
5、postMessage
1、JSONP
- JSONP的原理是什么？怎么实现的？
JSONP的原理：通过<script>标签的异步加载来实现的。可以通过<script>标签的src，里面放url，通过script标签引入的js是不受同源策略的限制，得和后端订好那个字段是回调函数
2. CORS
- CORS 可以理解成是既可以同步、也可以异步*的Ajax。
fetch 是一个比较新的API，用来实现CORS通信
// url（必选），options（可选）
fetch('/some/url/', {
method: 'get',
}).then(function (response) { //类似于 ES6中的promise
}).catch(function (err) {
// 出错了，等价于 then 的第二个参数，但这样更好用更直观
});
- “CORS为什么支持跨域的通信？”
答案：跨域时，浏览器会拦截Ajax请求，并在http头中加Origin。
3.postMessage
场景：窗口 A (http:A.com)向跨域的窗口 B (http:B.com)发送信息。步骤如下。
（1）在A窗口中操作如下：向B窗口发送数据：
// 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
Bwindow.postMessage('data', 'http://B.com'); //这里强调的是B窗口里的window对象
（2）在B窗口中操作如下：
// 在窗口B中监听 message 事件
Awindow.addEventListener('message', function (event) { //这里强调的是A窗口里的window对象
console.log(event.origin); //获取 ：url。这里指：http://A.com
console.log(event.source); //获取：A window对象
console.log(event.data); //获取传过来的数据
}, false);
4. WebSocket
首先Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分与后台的握手。
//创建WebSocket的对象。参数可以是 ws 或 wss，后者表示加密。
var ws = new WebSocket("ws://localhost:9998/echo");
// 建立 webSocket 连接成功触发事件
ws.onopen = function () {
// 使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
// 接收服务端数据时触发事件
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("数据已接收...");
ws.close()
};
// 断开 webSocket 连接成功触发事件
ws.onclose = function () {
alert("连接已关闭...");
};
- 事件处理程序 描述
ws .onopen 连接建立时触发
ws .onmessage 客户端接收服务端数据时触发
ws .onerror 通信发生错误时触发
ws .onclose 连接关闭时触发 - 方法 描述
ws .send() 使用连接发送数据
ws .close() 关闭连接，
