首先，我们来先了解一下什么是跨域：
浏览器对于JavaScript的同源策略的限制，例如 a.com 下面的js不能调用 b.com 中的js，对象货数据,因为 a.com 和 b.com 是不同域，所以就有了跨域的出现
那什么才是同域呢？这里简单解释一下 同域就是相同域名，端口相同，协议相同
同源策略
说到跨域，我们不得不了解一下什么是同源策略：
请求的url地址，必须与浏览器上的url地址处于同域上，也就是域名，端口，协议相同，这就是同源策略的保护，如果浏览器对JavaScript没有同源策略的保护，那么一些重要的机密网站将会很危险，具体怎么才是同源，我这里列出来一个表格：
| 形式 | 结果 |
|---|---|
| 同一域名，不同文件夹 | 成功 |
| 同以域名，同一文件夹 | 成功 |
| 不同域名，文件夹相同 | 失败 |
| 同一域名，不同端口号 | 失败 |
| 同一域名，不同的协议 | 失败 |
下面，我给大家介绍一下解决跨域的几种常见方案：
jsonp
通常未来减轻web服务器的负载，我们把js、css、img等静态资源分离到另一条独立域名的服务器上，在html页面中在通过相应的标签从不同的域名下加载静态资源，而被浏览器运行，基于此原理，我们可以通过动态创建script标签，在请求一个带参数的网址实现跨域通信，是目前比较常见的跨域方式
ps：jsonp解决跨域最大缺点就是只能实现get一种请求
跨域资源共享(CORS)
CORS(Cross-Origin Resource Sharing) 跨域资源共享，定义了必须在访问跨域资源时，浏览器和服务器应该如何沟通,CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或是响应是应该成功还是失败
xhr.open('post','http://www.aizhoujin.top/u/cors',true)
xhr.setRquestHeader('Content-Type','application/x-www-from-urlencoded')
xhr.send()服务器对于 CORS 的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域访问
document.domin + iframe 跨域
此方案仅限主域相同，子域不同的跨域应用场景
实现原理：两个页面都通过js强制设置document.domin为基础主域，就实现了同域
postMessage跨域
postMessage() 是HTML5新定义的通信机制，所以主流浏览器都已实现，该API定义在window对象
otherWindow.postMessage(message,targetOrigin)
message: 要传递的消息
targetOrigin： 指定目标窗口的源，在发送消息的时候，如果目标窗口的协议，主机地址或端口着三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送，只要三者完全匹配，消息才会触发
当源匹配时，调用 postMessage() 方法时，目标窗口的window对象会触发一个 message 事件，在进行监听事件时，应先判断origin属性，忽略来自未知源的消息
作者：周瑾ruiqi
链接：https://www.jianshu.com/p/6d4f3f83ac3b
随时随地看视频
