前端跨域方式总结

前言
在前端开发过程中,最常做的事情就是跟后端完成数据的传输,在众多经典的数据传输方式中,有一种不太常用但是又比较重要的方式,即跨域请求数据.
什么是跨域
说到跨域,首先就要提到一个前端的安全概念,即浏览器的同源策略.
简单来说,就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据,只允许同源的js脚本操作本页面。
那如果我们需要在同一个页面中请求非同源的数据怎么办呢？这个就涉及到跨域问题了。
什么是同源
同源需要同时满足以下三个条件：

1. 协议相同
2. 域名相同
3. 端口相同
注意：父域名一样，子域名不一样也是非同源的。

同源限制
如果非同源,以下三种行为将受到限制:
（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。

跨域方法

1. JSONP
这是一种最常用也是支持度比较高的跨域方式，其原理动态插入`script`标签，通过`script`标签引入一个`js`文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的`json`数据作为参数传入。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

2. CORS

服务器端对于`CORS`的支持，主要就是通过设置`Access-Control-Allow-Origin`来进行的。如果浏览器检测到相应的设置，就可以允许`Ajax`进行跨域的访问。
以上两种方式主要用来跟后台数据交互.

3. 通过修改document.domain来跨子域

将子域和主域的`document.domain`设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用`document.domain`进行跨域
主域相同的使用`document.domain`
此方法可以用来解决跨域cookie本地存储的跨域访问,LocalStorage 和 IndexDB 无法通过这种方法，规避同源政策，而要使用下文介绍的PostMessage API。

4. 使用window.name来进行跨域
`window`对象有个`name`属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个`window.name`的，每个页面对`window.name`都有读写的权限，`window.name`是持久存在一个窗口载入过的所有页面中的
以上两种主要用在 使用`iframe来实现页面结构的页面.完成DOM之间的跨域交互.

5. 使用HTML5中新引进的`window.postMessage`方法来跨域传送数据
该方法允许跨窗口通信，不论这两个窗口是否同源。
方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。
postMessage/addEventListener 基本类似于一个全局的事件管理器.可以通过这两个接口来发送/监听 事件,从而完成信息交互.

参考链接:

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
http://www.ruanyifeng.com/blog/2016/04/cors.html