一、什么是跨域通信及限制
跨域：协议、域名、端口，如果有任何一部分不同，则源不同。
同源策略：限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意软件的关键安全机制。
限制了哪些方面：（这个源的文档没有权利去操作另一个源的文档）
1、cookie,localstorage和IndexDB无法读取
2、DOM无法获得
3、Ajax请求不能发送（Ajax请求只适合同源策略，跨域就不行）
二、前后端如何通信
1、Ajax（同源下的通信，不支持跨域）
2、WebSocket（不受同源策略限制，支持跨域）
3、CORS（支持跨域通信，也支持同源通信）——跨域资源共享（cross-origin resource sharing）
三、如何创建Ajax（在工作中是用jQuery来实现ajax请求和处理的）
Ajax：是一种异步请求数据的技术，对于改善用户的体验和程序性能很有帮助
创建Ajax：
1、XMLHttpRequest对象的工作流程
2、兼容性处理（浏览器：IE、Chrome、Opera、FF）
3、事件的触发条件
4、事件的触发顺序（响应顺序）
XMLHttpRequest工作流程：
 |
responseText：获得字符串形式的响应数据
responseXML：获得XML形式的响应数据
发送Ajax请求的5个步骤：（XMLHttpRequest的工作原理）
1、创建XMLHttpRequest对象
2、使用open方法设置请求的参数。 open(method,url,async)
3、发送请求
4、注册事件。注册onreadystatechange事件，状态改变时就会调用
5、获取返回的数据，更新UI
四、前端跨域通信的几种方式：
JSONP、Hash、postMessage、webSocket、CORS
1、JSONP的原理？怎么实现？
原理：ajax请求受同源策略的影响，不允许进行跨域请求，而scrip标签src属性中的链接却可以访问跨域的JS脚本，利用这个特性，服务器端不再返回JSON格式的数据，而是返回一段调用某个函数的JS代码，在src进行了调用，这样实现了跨域。
2、Hash（url的#后面的内容就叫Hash）
Hash做跨域通信的基本原理：Hash的改变，页面会不断刷新
补充：url的？后面的内容叫search。search的改变会导致页面刷新，因此不能做跨域通信。
如：场景:页面A通过iframe或frame嵌入了跨域的页面B，现在A给B发消息，怎么操作？
A页面中：
var B = document.getElementsByTagName('iframe');
B.src = B.src + "#" + 'jsonstring';
B页面中：
window.onhashchange = function(){
var data = window.location.hash; //通过onhashchange方法见监听，url中的hash是否发生变化
}
3、postMessage()方法——H5新增方法，可用来做跨域通信
场景：窗口A（http:A.com）向跨域的窗口B（http:b.com）发送信息。
在A窗口：向B窗口发送数据：
window.postMessage('data','http://B.com'); //这里的window是B窗口的window对象
在B窗口中操作：
window.addEventListener('message',function(event){//这里的window是A窗口的window对象
console.log(event.origin); //获取url。这里指：http://A.com
console.log(event.source); //获取A window对象
console.log(event.data); //获取传过来的数据
},false);//冒泡
4、webSocket 新出的标准，不受同源策略的限制
用法：
var ws = new WebSocket("wss://echo.websocket.org"); //创建WebSocket对象
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!"); //发出请求
};
ws.onmessage = function(evt) { //接收消息
console.log( "Received Message: " + evt.data);
ws.close();
};
ws.onclose = function(evt) { //关闭连接
console.log("Connection closed.");
};
HTTP的缺陷：通信只能由客户端发起。
WebSocket特点：
1、客户端和服务端可以主动向彼此发送消息
2、建立在TCP之上，服务器端比较容易实现
3、与HTTP协议有良好的兼容性
4、数据格式比较轻量，性能开销小，通信高效
5、可发送文本，也可发送二进制数据
6、没同源限制，客户端可与任意server通信
7、协议标识符为WS/WSS，server网址就是URL（WS：未加密；WSS加密）
5、CORS——W3C标准，可以理解成是既可以同步也可以异步的ajax
fetch是一个比较新的API，用来实现CORS通信
fetch('/some/url',{
method:'get'
}).then(function(response){
......
}).catch(function(err){
//出错了，等价于then的第二个参数
});
CORS允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了ajax只能同源使用的策略。
CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能，IE不能低于IE10.