前端跨域常见问题以及解决方案

首先，我们来先了解一下什么是跨域：

浏览器对于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