跨域解决的五种方式

具体参考网址：https://www.cnblogs.com/qiujianmei/p/11649905.html

１：JSONP 

原理 ：利用script不受同源限制进行请求而不是利用ajax。

解：（1）通过script跨域的方式带上相关js回调方法和请求参数，给服务器。

类似于：<script src="https://www.jianshu.com/writer#/notebooks/?callback='getList'&id=11111"></script>

（2）到时后端回调你js函数方法且传送返回数据  getList（{ data:['424','2424234'] }）

  (3)  前端页面js:   function getList(data){  // 进行数据的相关赋值 }

优点：兼容性比较好。 缺点：前后端比较耦合、只能是get请求。

2：CROS方式。

概念： 跨域资源共享。

原理：CROS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信

分为：简单请求和非简单请求（有一次预捡请求options）.

服务端配置成功：响应头会进行返回Access-Control-Allow-Origin：许可的源。

请求头：origin: 源。

注意： cros跨域是不带cookie的，需要服务器端和前端一起相关配置好。

服务器端：Access-Control-Allow-Credentials: true

前端的ajax配置：withCredentials =true

3：websocket 

原理：不受同源限制，可以跟任何服务器进行数据连接，服务器端可以直接推送数据到客户端。

// 使用方法创建连接url

var ws = new  WebSocket("ws://ewwr.ds.aa");

// 打开，发送数据

ws.onopen = function (evt){

    ws.send(parms);

}

// 得到回调函数的数据,成功的时候

ws.onmessage = function (evt){

    // evt 得到的数据

//  进行关闭websocket的连接

ws.close();

}

// 回调报错的话

ws.onerror = function (err){

    // err的失败消息

}

// 判断浏览器是否支持websocket

if(typeofWebSocket !='undefined') {

/*supported*/

}

4：postMessage. 

使用场景：一般用于跨窗口、跨域父子窗口这种嵌套iframe。

主窗口 子窗口