00:01
Hello,大家好,我是小石啊,就是原来小石第一次和前端同学联调的时候就然后就报错了嘛,然后他们就跟小石说去把项目中的跨域配好,其实我当初并不知道跨域是怎么回事,然后就找了一下我们的leader,然后他就让我在代码中添加一一下如下的这种。如下的配置,然后这个跨域问题就解决好了。所以说我们今天就来聊一聊这个跨域问题是怎么造成的。好吧,因为现在绝大多数公司的项目都是前后端分离的,前后端分离的话都会遇到会会遇到一个跨域问题啊,这一欢嗯,报错的时候也基本上一下就能看出来,它就是这个has been blocked by cross这个,然后no access control,然后没有这个hi吧,一般就是然后的话,一般提示消息,会提示消息一般就是这个网络错误啊,所以说你和前段联系的时候,一直拖着提示这个,呃,提示报报这种信息,或者提示那种网络错误的话,一般情况下就是后端没有做跨域配置啊,注意此时并不是后端没有收到请求,而收到请求的返回结果了,但是浏览器他把这个结果给拦截了,并且报错。
01:17
就是浏览器为什么要会会报错呢?因为浏览器它基于安安全的考虑,它引入了一个同源的策略啊,就同源的策略是什么呢?就是当域名,当协议、域名、端口三者都相同时,才不会产生跨域问题及同源,此时才能读到那个服务端的响应,呃,我举个例子,就是当前这个UR和这个UR,你看这个UR它这个协议是不同的,所以说它会造成跨域啊,就是它的这个协议不同HTPS,一个是HTP。然后这个是它的域名不同,一个是3W点,一个是book点,然后这个的话是端口不同,这个默认的话是八零端口,这个是8000端口,所以它会有跨域的问题啊,就是它浏览器为什么要会会要有同源,会有这个同源策略呢?就是它主要就是为了安全起见,举个例子啊,就是以银行的转站为例啊,就是如果没有同样这个策略啊,你的钱会很容易就被丢失啊,第一步就是你浏览并登录信任网站A,就是你进了银行的网站了,登录了,然后验证通过,它肯定会给你设置cookie嘛,然后第三步你在没有登出A网站的情况下,访问一个呃微享的网站B,它是一个调研网站,然后他这个向网站A发出转账请求,然后第五步带着二厂商的库给根据四。
02:34
的请求访问A,然后此时你的前辈就被转走了吗?这个就是著名的这个跨站请求伪造啊。对,这种还有很多方式啊,如果第五步的话,不对这个来源进行校验,就是你的钱很容易被丢失啊,就是但是在HTM中如有如下几个页面是允允许跨域加载跨域加载资源的,就是这这种,那如何加解决跨域呢?就是同源策略保证了安全,那有一定合理性的用途也会受到影响,假如说你的前端项目在A域名下,就是然后发了一个阿贾克斯请求到B域名,B域名是我们的哦,后端服务嘛,然后由于同源策略的话,我们的阿贾克斯请求会报错,就是不能正常的请求接口。
03:21
就是解决跨域的方式有很多种,我就介绍两个,介绍一个吧,这个G3P的话现在也很少用了,第二个的话就是主要就是这个CS。CS呢分为两种情况啊,就是我们来看一下这种分为两种情况,一种就是非简单请求,一种简单请求就是就是在正式的跨域访问,在正式的跨域请求前,就是客户端会发送一个option请求,去询问服务端是否接接受,是否接受接下来的跨域请求携带如下的hier,就是他表明自己携带请求发起的域。
04:01
就是表明自己来自哪,然后发起话语请求的方法。对,Get还是post,然后。它包含了请求头字段,然后服务区中会增加如下的hier来表明它是否允许这个话语请求。如果不允许的话,不符合的话,然后他就不会发起这个后续的请求啊,第一个的话就是这个允许来自允许哪些域来访问,就是新表示所有域的请求,然后就是允许他的哪些请求方式,允许他的哪些请求和字段,允许他是否允许他携带cooking,你看,但是他这个就比较麻烦,每次发一个请求他得去,他得有两个步骤,第一个发option,然后后面才是一个真正的就是。比较麻烦,麻烦嘛,所以他就做了优化,就是当请求方法是这三种请求头只有如下几个时,它会被并定义为简单请求,简单请求的话就是在会在请求中直接加入,直接加入一个origin头啊,它就直接发起,就直接发起调用了,不会先循环,然后后端会返回相应的这些hi,然后浏览器在浏览器减。
05:16
如果浏览器检查到这个这个它的来源不符合要求的话,就会报错。所以说我们看看啊。其实这种跨域,所以说我们理解了这个整个跨域请求的步骤,就是我们就可以知道。各种配置啊,就是支持跨域的配置啊,其实就是往response中增加hier,增加这种hier来来表明服务端的行为,你看一般的话,第一种方式我们利用filter。它本质上就是一个filter,然后你可以看一下我这儿反了一个这个这个就可以,对对一些我们的域名是不是这些访问的,访问的这个请求是不是在我们的白名单内吧,这个我直接就是。
06:07
啊对,就直接简单做了一个判断嘛,没有做详细的,然后你看我就在response中设置了这个允许的哈,他来自哪就都可以允许,然后这个是可以他设置cooking,这个是它对反正它所有的和method都支持啊,然后这个这个的话,你看我设置了一个这个就是access control max maxage表明了询问结果的有效期限,就是在3600秒之内,浏览器就访问这个的时候,在它就不。没有必要再询问了啊,就是这个已经有了。没有必要再询问了。但是这个这种方式的话,我们一般不常用,但是你可以试一下,一般的话呢,我们一般的话,我们就是直接配一个这个就是spring Mac默认支持了嘛,它就默认加了这些配置,然后它就会自动给你加上hier嘛,你可以看一下这个这个和形式和我刚才的这些差不多嘛,就是映色路径允许的是否带哭点允许请求的方式,允许的请求投。
07:06
对,这些都差不多,然后另一个的话就是利用这个,呃,利用这个注解嘛,就是更细力度的配置,用在方法上或者类上,就是当时一般情况下,我我猜你们项目啊,就是很少会配置这个跨域请求的啊,因为这个跨域请求他一般都会在网关中做了,就是包括设呃,由那些NSO之类的网关来帮你设置这些hier,这样的话你就不用在每个项目中都配置这种跨域的请求。所以说你一般在你们生产项目中也一般看不到这种跨域的配置啊。好吧,然后今天对了,然后我这篇文章的话是放到我这个加入面试通关100问中了。嗯,如果想获取这篇文章的话,可以点击头像私信回复专栏,然后免费领取啊好吧,然后我们今天视频就到这里了,如果有帮助到你的话,欢迎点赞关注转发,我们下期见喽,拜拜。
我来说两句