00:01
上一节课我们配置了网关路由以及路径重写我们的验证码呢,也刷新出来了,当然我们在测试登录的时候呢,发现这报了一个错误,我们说这个错误呢,是我们这个跨域引起的,那什么是跨域呢?来说一下,首先跨域啊,它是浏览器对javascript施加的一种安全限制,就是浏览器默认不让我们的GS来获取远程网站的这数据,那么GS要获取数据就是发AJ请求,使用xm http request对象,那这个对象想要从本网站,比如我们在。8001想要给远程的八八来发送请求,默认是不允许的,不允许呢是利用同源策略来进行限制,同源策略的限制呢,就是说只要我们的协议、域名、端口稍微有一个不一样都不行,所以我们看我们从我们本网站8001啊,那要看端口,那从这往前,只要前边这一部分跟我们的目标地有任何一个不相同,协议名不同了,HTP变S了,包括呢,我们的域名不同了,包括端口不同了,都不行,我们都会同源策略进行限制。
01:18
只要限制了,那默认呢,就是不允许访问这些数据的,那比如我们这些情况呢,都会限制,首先呢,同域名下访问任何东西,这是不限制的,我们同域名下呢,访问任意路径下不同文件夹下的东西也是不限制的,我们呢主要是端口号及以前我们来看这一种,我们这个呢,虽然域名相同,但是呢,这个是域名的8000端口,这个呢没有端口,那这种情况下呢,两个网站之间互相用AJS获取数据是不允许的,不允许通信的,包括呢,如果我们的网站域名什么都相同,但是我们的协议名不同,也是不允许的,包括假设我们的这个域名。
02:03
对应的就是这个IP地址写这个两个呢都是一样,即使我们这么来写也是不允许的,只要是端口及以前稍微有一点变化都不允许,包括我们这个主域和子域,我们3w.a.com和这个script.a.com也呢是不允许进行通信的,包括我们的二级域名不同,也是不允许通信的,我们加了3W和不加3W,虽然在我们浏览器敲地址访问都是一样的,但这种呢也是被跨域限制的,那更别说我们这些不同域名,那肯定都是被跨域限制的,我们同源策略呢,就是这么来限制我们一个远程请求能否获取到数据。所以呢,当我们来发送这个请求的时候,我们会看到这么一个现象,我们来点击登录,它在这儿呢,就会被拒绝,因为我们这个腾源策略影响了,而且呢,发这个请求还有一个特殊的现象,我们再来发一下,我们发这个请求呢,先来一个403,但这个请求方式大家看一下,这个叫options options呢是我们跨域里边的一个打头兵,就像是我们的探路者,我们把这个请求呢称为预见请求,其实此时呢,真正的登录还没有发出去,所以呢,我们来说一下跨域的整个流程是这样的,当我们发送一些非简单请求,比如一些put delete。
03:27
当然哪些属于非简单请求,我们这儿有一个官方文档,我们在这儿可以完全看到对跨域里边的一些说明,好,我们在这儿来给大家来阅读一下。跨域呢,是一种我们这个资源共享的安全限制机制,我们在下边来看一下,什么情况需要跨域等等,这都解释的很清楚,我们在这看一下,如果简单请求下面的方法呢,都属于简单请求,Get head post这些都是简单请求,但是呢,简单请求还要满足以下这些,比如我们发送的请求的内容类型必须是下列之一,而我们这个登录啊,我们后来会说它其实呢是发送的一个POS请求,但是内容类型呢,不是我们指定的这三种,它是一个application,我们后来会看到,所以呢,它不属于简单请求,包括呢,下边也说了哪些是非简单请求,这些不是简单请求的,都需要发送一个预检请求。
04:27
这个预检请求呢,就是option方式。所以呢,只要满足下边任何一个条件,我们发送请求都应该发送预检请求,那我们的整个跨域流程就是这样的,我们浏览器假设发送了一个非简单请求,我们首先呢要发一个option请求,就是打头兵先找服务器问一下我们这个服务器允不允许我浏览器跨域访问你,那如果服务器访响应了允许,那我们浏览器才会发送它真正的请求过去,拿到响应数据,而此时我们现在的服务器呢,是不允许的,所以我们直接一个option请求过去以后,第二个真实的请求就没有再发过去了,那我们如何让它允许我们呢?就可以使用这几种方案,首先呢,第一种我们现在既然知道跨域的根本原因,就是由于我们目标网站跟他想要发送远程请求的网站不在同一个域,哎,我们的网址端口号以及协议有任何一个都发生了变化,所。
05:30
那我们就可以使用第一种办法,我们使用呢,NX把它们转化为同一个域,怎么办呢?比如我们呢,现在这有一台NX服务器,我们将我们的前端项目也部署到里边,将我们后台的网关,我们也让NG代理过来以后呢,我们浏览器想要访问我们这个前端项目,我们就不访问前端项目的地址了,我们访问NS的地址,那NS呢,只要是静态请求,默认都代理给我们的前端项目,那我们都知道我们的动态请求都会加上API,那只要我们再来访问动态请求,那么还是发给NSNS一看带了PI,它动态的再来转给我们的网关,也就是反向代理给我们的网关,网关再来转到其他服务,那我们就可以利用第一种方式,从头到尾访问路径呢,都是N的服务地址,N配置好我们的反向代理相关的内容,把它们转化为同一个域,我们就不跨域了。当然这种在我们。
06:30
开发期间呢,稍微比较麻烦,那么接下来呢,就可以用第二种办法。既然跨域会首先发一个预检请求,去问服务器能不能跨,那服务器如果告诉他能跨,那不就完事了吗?那怎么告诉他能跨?那很简单,我们给这一次预检请求给一个响应,告诉他能跨,响应呢,主要配置相关的响应头,响应头里边比如配置如下一些字段,比如有一个叫is control,就是呢,允许哪些来源的请求进行访问,如果我们配一个芯,那任意来源的请求都能进行跨域访问,包括呢,我们还可以配置允许哪些请求方式?
07:11
比如get put,它delete,它这些请求方式呢,我们都他让他允许跨域访问。包括呢,我们跨域访问的时候,还允许我们传输cookie数据,我们就可以给这个字段设置为true等等等等,这有一堆的跟跨域有关的响应头,这样呢都可以在官方文档里边看到,那我们呢,在开发期间就可以使用第二种,但是我们现在来想,我们每一个请求,我们现在是登录s logo,我们都请求结束以后,手动给它添上这几个响应字段,那太麻烦了,因为我们好多请求都要跨域,所以呢,我们最快的方式就可以写一个filter,我们所有的请求一进来以后,我们放行,他执行完了以后。返回给浏览器之前,我们给响应里边就添加上这么几个字段就行了,而且呢,我们把这个filter不用写在每一个项目里边,因为最终每一个项目可能都会被远程访问,进行跨域,我们只需要写在网关里边,因为我们现在是网关代理给其他的服务,我们直接在网关里边统一配置跨域,我们就可以解决这个问题。
08:23
那怎么在网关里边配置这个跨域呢?好,我们将网关里边相关的配置我们都放在conflictf文件夹里边,好,我们来专门来写一个跟跨域有关的配置cos。好,我们来写这么一个配置类,首先呢,我们来标注它是一个配置类,我们想要跨域呢,其实我们spring boot已经为我们提供了一个filter,那叫cross cross web filter,我们看到呢,这有这么一个filter,我们将这个filter只需要放到容器中,它就会产生作用,好那我们就来配置一下它来写一个方法,这个方法呢,就帮我们来返回跨域的这个filter,这个filter呢,我们进行一个配置,我只需要new一个这个跨域的filter,那当然我们在new的时候呢,这个filter里边需要传入一个跨域的这个配置信息,那我们把这个跨域的配置信息我们来构造出来,这有一个跨域的配置信息,好我们来引入的是这个reactive包下的跨域的配置信息,好我们呢,把这个跨域的配置放在这等于。
09:44
New,一个cross configuration source,我们创建一个它,但是呢,我们发现它在创建的时候呢,这个东西是一个接口,那我们就来打开它的实现,这个实现里边呢,就有一个叫URL best,也就说基于ul路径的这个跨域的啊,这个配置好,我们就来有一个有一个叫URL best cross,注意我们选择react,因为我们网关是使用weblex进行编程的,它是一个响应式编程,我们都使用响应式包下的这些类,好我们就来创建一个它,我们把这个呢就可以删掉了。
10:23
我们呢,主要把它配置来放在这儿,那这一块呢,该如何配置,我们主要来写这么几个,首先SS里边有一个叫注册跨域的配置,这有一个路径,这还有一个配置,那这个路径呢,我们就来写杠双星,那意思呢就是。任意路径我们都要进行跨域配置,那接下来呢,它还需要一个。加cross configuration,那我们就来给他再来创建上一个cross configuration cross configuration好。
11:00
我们来给它创建上这个cross configuration,你有一个cross configuration,那么这个cross configuration呢,跟我们这一块的类名有些重复了,所以我们在这引用了一个全类名,我们把我们的类名改一下吧,Shift f6。我们呢,就叫古丽麦。我们的这个鼓励商城的跨域配置,这个跨域配置呢,我们接下来把这一块就给它变短一点就好看了,好。把它配置过来,我们把这个配置呢,最终放到这儿,所以说呢,所有跟跨域有关的配置,那都写在这个里边,我们都是一点一点new,需要什么再创建什么就行了,好,我们在这里边呢,配置跨域,主要配置这几个cross configuration里边有一个叫and aloud header,也就是说呢,我们允许哪些头进行跨域,那我们现在呢,都写一个星,包括呢,我们在这儿还有一个叫and。
12:05
Alo method允许哪些请求方式进行跨域,那么现在呢,允许所有请求方式是get put post delete都行,然后呢,我们包括再来添加一个允许哪个请求来源进行跨域,我们请求来源呢,也写一个心儿,就是任意请求来源的我们都允许他跨域,包括我们再来写上一个这个它有一个叫set alo cdials比说是否允许我们携带cookie进行跨域,我们呢也给他允许一下,否则呢,跨域请求就会丢失相关的cookie信息,好,我们把这些呢都配置好,放在这以后呢,我们来给它按B应,我们把它加入到容器中,那加入容器中之前,我们先来看一下我们之前的这个跨跨域,我们即使发送这个预检请求option,但是呢,我们的这块响应,响应里边呢,只有一个内容的长度,零并没有任何东西。当我们给网关配置了允许所有请求跨。
13:05
域以后我们来重启网关,包括我们也可以重启一下人人application。我们来测试一下新的效果,我们来等待它重启。好,现在这一块呢,网关跟人人application这些都启启动起来了,那接下来我们就来进行测试。我们来重新刷新一下。我们现在进行登录,嗯,Adin adin这个验证码呢,是D36DN,好,我们进行登录,诶我们现在呢,发现我们发送了两个请求,第一个请求呢,还是我们的,我们来看一下ocean,这是我们的预检请求,因为我们这是一个非简单请求,在跨域之前先发送一个打头兵预检请求option,然后呢,第二个才是真实请求,但在预检请求发送完了以后,我们就能看到这有一个叫响应头,响应头里边呢就会多了这些字段。
14:14
相当于我们要允许这些跨域允许来源于这个地址的请求,诶相当于允许我们这个网站给我们远程服务器发请求了,我们也允许post方式发送请求,包括我们也允许携带cookie等等的内内容,这是我们的预检请求,那预检请求完成了以后呢,第二个才是真实请求,真实请求呢,我们才携带了真正的请求数据,带了用户名,带了密码,带了我们的验证码,包括还带了UID等一大串在我们的响应头里边呢,在这。就会出现我们允许哪些跨域的响应配置,但这一块呢,我们发现有一个问题,这一块两个,这个允许我们携带cookie跨域,这两个处包括允许哪个来源,这还有两个包括我们这也出现了报错,你看控制台这块报错呢,说我们这个XHR叉mhtb request这个对象从这一块跨域被同源策略阻塞了,这个阻塞的原因,同时哎这说包含了multi value包含了多个值,也就说这个8081 8081也如他只希望呢,Only one只希望有一个,不应该有多个,那这个多个的原因是什么?我们在网关这配置好了跨域,那我们的这个后台的脚手架工程,他自己呢,可能也配过跨域,只不过呢。
15:40
我们要把这个跨域呢,就要先注掉,不要让它用它默认的这个跨域,所以呢,我们就把它注掉,它呢相当于给我们多加了一些响应头,好,我们把它注掉以后呢,我们来重启网关,跟我们人人application。
16:02
我们只需要在网关处统一配置跨域,配置好了以后呢,我们来重新测试好,把控制台都清空。来,稍等我们的服务是否启动完成。好,我们现在来测试一下刷新。我们还是输入dindin,这呢有一个验证码y fe73回车,诶我们现在呢就登录上来了,我们也解决了跨域网关的路由以及路径重写也都配置好了,我们现在正常的进入到了后台管理系统。那下节课呢,我们就来继续来开发我们的分类维护。
我来说两句