出现跨域问题原因： 同源策略
什么是同源策略？
1. 协议相同 （http & https）
2. 域名相同 （http://www.a.com & http://www.b.com）
3. 端口相同 （http://www.a.com & http://www.a.com:8080）
同源策略的限制范围：
1. cookie、localStorage、indexDb无法读取
2. DOM无法获取
3. AJAX请求不能发送
出现跨域后的解决方案？
1. 获取cookie：设置document.domain共享cookie
2. 获取DOM：（父子页面通信）window.opener.postMessage(message, targetOrigin, [transfer])
3. AJAX：
Ⅰ. JSONP：基本思想是网页通过添加一个<script>元素，向服务器请求json数据，这种做法不受同源政策的限制，服务器收到请求后，将数据放在一个指定名字的回调函数里面传回来。（只能发GET请求）
Ⅱ. WebSocket：WebSocket是一种通信协议。使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信
Ⅲ . CORS（corss-origin resource sharing 跨域资源共享）：CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能，IE浏览器不能低于IE10；只要服务器实现了CORS接口，就可以跨源通信
1. 简单网络请求：对于简单请求，浏览器直接发出CORS请求。具体来说，就是在Header中增加一个Origin字段
如果浏览器发现跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段
2. 非简单请求：非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错
3. 与JSONP对比：CORS与JSONP的使用目的相同，但是比JSONP更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式的浏览器，以及可以向不支持CORS的网站请求数据
详解如下图：
