前端跨域问题

跨域是前端请求存储之中经常需要接触的问题，其本质是为了数据的安全性，但是同时也使得我们开发过程中存在很多的不便，今天就让我们来学习总结一下常见的跨域问题的解决吧。

概要

什么是跨域：访问的地址内容于当前所在地址不同源。

如何判别不同源呢：DNS不同，二级域名不同，端口号不同，DNS与等IP等等这些都不算同源。对域名不太了解的朋友可以看这里

跨域问题主要有：ajax请求， cookie，localStorage，indexDB，iframe。 接下来我们每种情况过一遍：

cookies

如果你不理解cookie的话请点击这里。js的document对象之中有一个domain参数,这个参数可以帮助我们进行跨域的操作。当两个页面的domain设置成为相同的时候，浏览器会认为两个页面之间是协作关系。

浏览器会详细的记录 和 辨别当前页面的domain情况，修改或者是没有修改过domain的都将会记录下来。当然我们修改domain的时候也是有条件的，domain只能修改为当前域的父级域。否者时会报错的，利如，当URL为www.baidu.com的时候，domain可以修改成为baidu.com，但是不能修改成为xxx.www.baidu.com。因为只有如此才能很好的防止子域的跨站XSS攻击。

iframe

iframe也是我们时常会用到的标签，用于页面的嵌套，但是实际上父级window和iframe的window当不是同源的时候，是完全无法擦操作的，虽然我们可以通过contentWindow获取当前页面的window对象，但是实际上window下的所有操作都会有跨域错误的提示。那我们来看看当前的iframe的跨域有什么解决方式吧。

1. domain：域设置可以运用到当前iframe的跨域上面，设置到相同的domain下，就可以直接通过iframe页面的window对象进行操作了。
2. url#frame_params：URL地址片段信息内容，再URL之后通过#来添加数据内容，这个时候更改URL是不会刷新原有页面的，但是我们能可以通过监听hashchange事件来达到实时检测URL的改变。
3. window.name: 这一个属性不会因为页面的变化而变化，跨域页面之中通过这个属性来存储需要使用的数据信息，然后跳转到同源的页面再通过contentWindow来获取这一属性就可以了，但是这种方法实际上有点取巧的意味在里面。
4. postMessage API：html5提供了一套跨域的解决方式的API。通过使用otherWindow.postMessage(data, origin)的方式来传递数据，需要获取数据的页面可以通过监听message事件来进行内容的获取。这个data就是想要传递的数据，origin表示需要传递数据的页面地址，只有再页面的地址域origin相同的时候浏览器才会将message推给这一个页面，否则将会屏蔽掉。再使用postmessage的时候我们一定要注意页面的安全，如果不需要接受事件内容的情况下请尽量不要监听message事件，如果有需要的情况下也请传递消息的时候明确的额给出origin参数。

localStorage

学习过localStorage的话我们可以知道，这是一种本地存储的技术，其是特定与页面的协议。即当前页面操作的localStorage值存在于当前页面对应的域名的可存储模块下面，使用也只有再当前域名对应的页面才可以使用。着也就使得如果另一个域的页面需要使用这一个页面的localStorage之中的值的时候，我们也需要做跨域处理。解决方式是，通过postMessage来传递相关的信息内容。

Ajax请求

ajax请求的跨域因该是这之中最为被看重的问题了，方法如下：

1. JSONP：jsonp请求实际上是通过script标签进行的请求方式，script标签请求不会受到域的影响。这就引申除了JSONP这项技术，实际上就是再我们通过script标签请求远处数据的时候，通过参数传递一个本地定义callback方法，从服务端获取数据之后，会将自动的调用这一回调方法并将数据作为参数给与到方法。这个过程实际上就是JSONP。所以我们可以通过封装一个函数动态的装机script函数，灵活的调用JSONP来获取我们需要的数据。
2. websocket：一种通信协议以ws://或者加密模式以wss://开头，这个协议只要服务器支持就可以进行访问，不受到同源策略的影响。
3. CORS：是W3C的跨域标准，需要适合版本的浏览器才会支持。当我们ajax请求需要跨域的时候，浏览器会依据请求时候的提交的内容自动判断是否运用CORS，无需编程人员加其他额外设置。只需要跨域的服务器做出相应处理就可以了。这里我连接一片阮一峰老师的文章具体的CORS内容可以看这里.