前端跨域方式总结

前言
在前端开发过程当中,最常作的事情就是跟后端完成数据的传输,在众多经典的数据传输方式中,有一种不太经常使用可是又比较重要的方式,即跨域请求数据.
什么是跨域
说到跨域,首先就要提到一个前端的安全概念,即浏览器的同源策略.
简单来讲,就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据,只容许同源的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.htmlhttp://www.ruanyifeng.com/blog/2016/04/cors.html