跨域通信的几种方式

1.JSONP（JSONP只支持GET请求）
jsonp就是动态创建script标签，用script标签中的src进行请求。在src中指定访问的地址并且加上要请求的数据和指定一个本地的回调函数名，让后台把数据作为这个函数的参数传过来。请求成功后再把script标签删了。
优点：2.可以跨越同源策略
缺点：只能GET不能POST
JSONP的优缺点
1.优点
1.1它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略；（可以跨越同源策略）
1.2它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持（兼容性很好）
1.3在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分开了。我提供的jsonp服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同 一个jsonp服务。
2.缺点
2.1它只支持GET请求而不支持POST等其它类型的HTTP请求
2.2它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
2.3 jsonp在调用失败的时候不会返回各种HTTP状态码。
2.4缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。
2.postMessage

发送方：A窗口发送
  var iframe= document.getElementsByTagName('iframe')[0].contentWindow; //获取B窗口window对象
  iframe.postMessage("Hello World"！", "*"); //调用postMessage这个方法 第一个参数是要发的信息，第二个是指定目标窗口的来源，必须与消息发送目标相同，可以是是字符串"*"或URL

接收方：B窗口接受
window.message=function(event){
event.origin  //表示postMessage的发送来源，包括协议，域名和端口
// 通过origin属性判断消息来源地址
if(event.origin == 'http://a.com'){
      console.log(event.data);
      console.log(event.source);
    }
event.data //表示接收到的消息
event.source //表示发送消息的窗口对象的引用; 我们可以用这个引用来建 的窗口之间的双向通信。

3.WebScket (不受同源策略的限制)

// 初始化一个 WebSocket 对象
var ws = new WebSocket("ws://localhost:9998/echo");

// 建立 web socket 连接成功触发事件
ws.onopen = function () {
  // 使用 send() 方法发送数据
  ws.send("发送数据");
  alert("数据发送中...");
};

// 接收服务端数据时触发事件
ws.onmessage = function (evt) {
  var received_msg = evt.data;
  alert("数据已接收...");
};

// 断开 web socket 连接成功触发事件
ws.onclose = function () {
  alert("连接已关闭...");
};

4.CORS（http://www.ruanyifeng.com/blog/2016/04/cors.html）
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
简单请求：浏览器发现这次请求不符合同源策略，就自动在头信息之中，添加一个Origin字段。
上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请
非简单请求：浏览器发现，这是一个非简单请求，就自动发出一个"预检"请求，要求服务器确认可以这样请求