跨域通信

跨域通信常用的几种方式

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() 关闭连接，