前端跨域问题

1,211 阅读5分钟

前言

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

概要

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

如何判别不同源呢: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内容可以看这里.

结束

只能对跨域问题大体上就说到这里,文章其中有部分搬运和参考之后将会将连接发在下面。错误支持望帮忙支持,共同学习,共同成长,下篇文章见,拜了个拜。

参考文献:

www.ruanyifeng.com/blog/2016/0… blog.csdn.net/qq_33301989… www.runoob.com/json/json-j… developer.mozilla.org/zh-CN/docs/…