00:00
好了各位啊,刚刚呢,我们学会了第一种配置代理的方式,那这种写法呢,有点怎么说呢,不太完美。为什么呢?因为你这么一写,同学,你的含义就是3000,只要没有的资源是不是找5000要啊,那你只能配置一个代理啊老师什么意思,就是3000只要没有了就找谁要是不是找5000,哎,那同学回到服务器代码啊,我得跟大家说明白,我现在打开的是什么服务器代码,我把这个呢最小化,哎这回你看的能清晰一点,哎,服务器代码没全屏的是吧?哎,我除了有SERVER1呀,你注意观察。嘿,我还有SERVER2呢,而且你注意啊,SERVER2呢,和SERVER1几乎是一样的,唯独有差别的地方就在这儿,如果有人请求服务器二的输出的是这句话对吧?哎,而且返回的注意不是一堆学生的信息了,Cars,一堆汽车的信息。
01:01
每个汽车呢,有自己的ID,有名字,有价格。对吧,哎,把汽车交回去,而且在这儿呢,我说服务器二启动成功了,请求汽车的信息地址为注意看。5001我又是一台服务器了,对不对,五千零一下的卡。那同学你想如果有两台服务器同时存在,你发送请求的时候,一会儿得从5000要数据,一会得从5001要数据,那你就得是吧,来同学这儿不能停啊,服务器一正常启动,点击加号,再开一个终端node执行server几呢?SERVER2回车。同学,SERVER2是不是启动了?请求汽车的信息是不是在这儿呢?复制首先一定要确认你这接口本身好不好用,回到这儿还是测试借助浏览器的地址栏发送一次get请求给5001走起,汽车的数据是不是回来了?
02:03
好了,确定接口好用了,关掉最小化,那这个时候哎,就出现了有人请求服务器二了,对不对,同学们好,服务器二呢,关掉。清空一下,重新开启,让它干干净净的好关掉啊,或者最小化我的服务器代码啊,我点这最小化走,然后呢,回到你的前台脚手架,脚手架里边同学你这一写你来吧。3000只要没有是不是都找5000要,那万一我的数据在5001呢,那你觉不觉得你就写不下去了呀?哎,那也就是说我这儿呢,除了有这个按钮,我再来一个不是get student car获取数汽车的一些数据,学生删掉叫啥叫汽车。来吧,就得再定义一个get car date对吧?那同学你看吧,你这如果写3000,纵使你写了卡,那同学3000有卡吗?没有,那就得找谁要,由于你这写了一个是不是找5000要。
03:09
那你看你这就写死了吗?5001说老师,那我就改成5001,那你这改成5001,那我再问你啊。嘿,你的学生数据呢,5000的呢,哎,所以说你这,哎只要你配一个,这很难受,那怎么配两个呢?来这样,如果你想配两个,不是在package.jason里边进行操作了啊,注意删掉package.jason里边不配置了。不配置了,说老师那怎么办呢?来,回到src文件夹,我把这些人呢先都关掉,如果您想在react最新版这个脚手架里边配置代理啊,那得麻烦一点,如果你想配多个代理,一个倒是简单配置,点J里边直接写就得了,说老师,那为什么你删掉呢?我不能在这儿也配置,我再通过别的方式也配置,你得二选一呀,OK啊,没事,我们有那文档的啊,别急,来走,如果你想配置多个代理,那需要做的事儿就稍微复杂一点,我慢慢来啊,同学注意啊,现在按照我的写法就是一个代理都没有配,page.json里的东西也被我删掉了,对吧?啊,然后这两台服务器确实是服务器二是不是准备好了,来看这服务器一呢,是不是也准备好了,那这样我让他都干干净净的啊,清空走,启动服务器一一是不是启动了,OK,二是不是启动了,OK,有人请求是不是就输出东西说谁请求我了对不对,好来。
04:32
你得在这呢建立这么一个文件,而且名字不能改啊,React脚手架呢,会自动找到这个配置文件呢,叫做setup setup啥意思呢?是不是有建立的意思,哎,建立什么呢?Proxy proxy建立代理。哎,那而且你注意了,这个文件里边不能用前端人员熟悉的那个ES6的方式去写,你要用CGS的方式,就是common GS,因为这个setup prox不是给前端代码用于执行的,是把这个文件react脚手架啊,会找到这个文件,把这个文件加到webpa的配置里边,Webpa同学里边用的是不是都是node里的语法,是不是写的都是CJS呀,哎,所以说这个文件里边你要写common GS的语法,那我说一下接下来我所写的东西,大家根本不用把它记住,你只知道需要配置的时候,我们把这段代码加上就可以了。首先你要引入一个内置的模块,我先写着啊,同学,这段代码你面试的时候也不会有人让你徒手写这个的,说来你写一下,我看多个代理怎么配,同学一个项目配代理是不是也就配一次呀,对,配完了以后就用就得了呗,哎,所以这种配置相关的东西你不要太纠结。
05:49
啊,引入那得用什么呢?得用块对吧?CDS吗?你不能用import了,那不是ES6的吗?走,你要引入一个内置的模块啊,叫做HTTP啊prox,然后是middlewa middlewa啥意思?中间件说老师这个库我不用下载一下吗?那你注意看,摁住CTRL键往这一放,它咋蓝了呢?它为啥蓝色的呀?哎,同学,我说一下react脚手架里边已经下载好这个库了。
06:22
说老师那什么时候下载的呢?在你初始化脚手架的时候就已经下载好了,也就是说刚刚你在package点儿Jason里边通过prox去配置代理,只是这种方式的一个简写而已。现在我写的就是完整版了,也就是说刚刚你配代理的时候,我问一下用没用上,他用没用,其实也用了,只不过您没自己写对吧,你只是配了一个pro,然后他帮你写了OK走,然后呢,它需要你暴露一个对象module.pro暴露暴露一个什么呢?一个配置对象。啊,然后要是按照最新版吧,你应该写一个函数啊,所以说之前确实写一个对象,现在写对象行不行呢?也行,但是在某些脚手架里边兼容性太次了啊,所以说我们要写一个通用点的啊,我们就按照它那个官网那个标准来,我们配置一个啥呢?函数好,然后函数里边的同学会收到一个服务对象APP,然后呢,你得调用APP身上的一个什么呢?Use,哎,使用的这个方法。
07:26
然后使用里边写什么呢?你得调用一个人叫做proxy调用它,调用它的时候传两个参数,第一个参数就是要把哪些前缀的请求转发给5000。哎,我先写着,比如说写一个API啊,以后发送请求的时候,同学只要你的路径里边带有这种东西杠API1,那么就接下来就会走代理。然后第二个参数呢,它传一个配置对象同学你就看我写一遍就行,以后用的时候直接拿过来就用,OK啊,不要在这纠结,然后就是如果你的请求地址里边出现了杠apie,那就得转发改请求,那把这个请求转发给谁呢?你刚才是不是写了一个proxy,然后写了一个http local house的5000,那你说转发给谁,是不是转发给5000?哎,那这呢,你也得用一个配置去告诉人家转发给谁,那这个配置的叫做target,哎,写个引号转发给谁呢?Http local host5000。
08:36
好,哎,就能转发给5000了,我先不写注释,我给你的文档里边已经写上了详细的注释,我先这么写着啊,走,你光写他给他不够,说老师那不就是带有这种前缀的请求都转发给5000吗?你光这么写还不够,你应该再加上一个人,叫做change orange,这个能干嘛呢?能够让服务器彻底的知道这个请求是从哪发出去的,这是一个布尔值。
09:04
默认值呢,是false,我们尽可能的要把它改成true,那这个东西为true为false会影响什么呢?我会一一给你验证的,我先写啊,还剩下最后一个叫做pass rewrite,为什么要写这个呢?如果你不写这个,我先说,同学你能听明白不?我先说,我知道有有很多大家疑惑的地方,同学,你总得让我写下去吧,啊,对吧,你总得让我说下去吧,OK,好,别急啊,走这里边呢,要传一个对象,首先就是你要把哪个前缀给它替换掉,我们要把apie替换掉。那替换成什么呢?替换成一个空串。你之前不是加了杠API1吗?你正常发请求,你的URL地址里边是不应该出现杠API1的,但是如果按照这种配置,你不加杠API1,兄弟,那你想好了,你不加杠API1,那就意味着你是没有机会把请求转发给5000的,你就得加,但是你加了杠API1,路径是不是又不对了,那就得通过这种形式再把它改回来,好,我先这么写着,所以说你这写完了就能配置代理了,就能转发请求了。对,我们先试一下,随后仔细聊这些属性,别急嘛,对吧?同学,那你说你刚才是不是改了配点Jason,而且你是不是还建立了这个极特殊的文件react脚手架底层会便利它的,所以说同学你必须把你的脚手架停掉,然后重新开启,这没得商量,你不重启肯定是不行啊,来,走着启动。
10:40
关掉控制台,打开,别急啊,先别去点获取学生数据,还有点儿不太对呢,回到我们的前端代码,哎,同学你注意啊,服务器一是不是还没人请求呢?二也没人请求呢啊,一返回学生,二返回汽车是不是?哎,这小话来同学回到你的APP里边,咱不说别人啊,咱就说第一个按钮获取学生数据,你这么写啥意思呢?去3000这找students数据,我问一下三这有students数据吗?你打开public,打开它的根目录,有students吗?没有那怎么办?说老师那就走代理呗,不,根本不会走代理,因为他并没有发现你的请求是带着这个前缀的,哎,那所以说呢,你就得这样写杠,注意了啊,API1杠。
11:30
那你这么写的含义就是,如果3000没有这个请求啊,3000没有这个数据,那就走API1所配置的那个代理谁呀,5000于是乎就访问了5000下的students就得到数据了,好,我们试一下啊,来到这儿刷新一下获取学生数据,走数据能不能回来能。是吧,首先确定数据能回来,那服务器一来注意观察有没有人请求呢?哎,你看的确有人请求对吗?哎,那同学们,我们在测试另外一个事情,就是我不写这个杠API1我就找3000要students,那你看他给你的结果就是刷新。
12:10
他的意思是,哥们儿,不好意思,3000没有STUDENTS404。走走代理吗?根本不走,因为人家没有监测到你的请求地址里边包含这个杠API1,那我先写下去,同学你说同理,我如果再想配置一个,我想把服务器二也配置进来怎么办?这敲一个逗号,从这到这再复制一遍,注意use这个函数能传多个参数,这是第一个,这是第二个,你只需要把这改成5001,这改成API2,那你这儿与此同时也得改成API2,对吗?同学是不是改了这个最为核心的配置文件对吧?好,脚手架停掉,重启脚手架。等着啊。好了,打开了。大家练字的时候呢,一定是边看视频边操作,别着急点那个获取汽车数据,如果哎,回到我们的前台代码啊,前台代码,如果你想把请求转发给5001,我问一下你得怎么操作呢?
13:17
是不是得加上API啊,那所以说来吧,同学这怎么写呀,API2再来个杠car,那你说见到API1了得了,转发给5000,见到API2得了,转发给5001是吧,来回头测试一下啊,不看服务器啊,最小化服务器回到我们的页面啊走接下来呢,刷新,注意看啊,获取学生数据OK,正常获取汽车数据,来走起。学生,哼,汽车对吗?哎,OK。现在观察同学是不是能配置多个代理了,而且我能非常灵活的控制你到底走不走代理,如果想让你走代理,而且转发给5000,是不是来个API1,如果想转发给5001是不是来个API2,如果不想转发不走代理,那是不是压根就别写API啥啥啥对吗?那接下来呢,咱们研究点细节上的问题,就这些玩意儿,他都是干嘛的呀,是吧?同学第一个呢,我觉得大家好理解,同学把这个搞明白了,那你说这是不是就也搞明白了?哎,慢慢来,同学第一个学了,这叫什么呢?哎,叫做请求转发给谁对吧?
14:32
哎,那说这个杠API1啥意思呢?哎,那叫做什么呢?不能说什么东西都走代理吧。啊,那就是什么呢?控制啊,或者这么说吧啊,遇见API1啊,这个前缀的请求就会触发该代理配置,你没有API前缀,那不算啊,准确点说应该遇见杠API这个前缀是吧?哎,那这是干嘛的呢?啊同学说一下啊,这个呢,如果啊,你不写它的默认值是false,但是现在我写了,是不是改成错了,同学,如果呢,我们想写成false,而且默认值也是false,那咱就不写了呗,对吧,那这东西能干嘛呢?写好了叫做控制服务器呀,收到的啊响应头,响应头中host。
15:40
字段的值,那么同学们,你们之前学习HTTP协议的时候一定讲过host字段是干嘛的?简单跟大家说,这个host字段呀,标识着本次请求是从哪儿发出的?服务器呢?在接收一次请求的时候,他能收到很多的信息,其中有一个最为重要的就是这个请求是哪儿发出来的。
16:08
对吧,好了,同学,那你看着我给你做一个测试,如果我不加这个change orange为true,我不加这个啊同学给它注掉,那这得这么写是吧,给它注掉好了,你是不是改了这个文件,慢点来,慢点来,是不是改了这个文件,对,你只要改了你就重启脚手架,肯定没错,你不重启它不生效嘛,对吧,慢慢来走。之前那些啊,都关掉好控制台呢,我也打开,我不发请求啊,注意我的准备性工作还没做完呢,我说了这个东西能控制服务器收到响应头或者请求头,哎,收到应该是请求头啊,这改一下不是响应头,是请求头,请求头。哎,能控制服务器收到的请求头中host字段的值。那同学你是不是得到服务器里边输出一下某一次请求,那个请求头中host字段的值啊是吧,或者host的值对吧,不说那么繁琐,那所以说呢,同学注意看,回到服务器代码来到服务器一。
17:16
如果有人请求了,不仅要说有人请求了,再多说一句话在后边啊,或者我再来一句吧,啊,叫做请求来自于来自于来自于哪儿啊,就要拿到那个host的值,怎么拿呢?在这request.get获取指定的请求头的值拿谁呢?Host好了,保存改没改服务器一改了关掉服务器重启,你改服务器一了,肯定得重启服务器吗?那这样我先停一下,我清空,那它干干净净的行吧,同学,我问一下服务器一准备好了吗?准备好了。
18:00
啊,那我的代理里边回到前台的代码,我的代理里边是不是没加这句话呀,好,那我问你啊,同学,从本质上来说刷新一下啊,我现在所处的位置是不是3000。你别管经没经过代理,怎么怎么地,最终这个请求我问一下是不是交给5000了,对吧?好,现在呢,我获取一下学生的数据,走,你学生数据是不是回来了,同学重点不在这儿,重点在服务器那边拿到的host到底是什么,注意看,嗯,什么3000,就如果你不加这个东西,同学服务器其实是知道的,你本质上还是谁过来的请求3000,如果服务器在做了一些比较严格的限制,就发现,哎呀,哥们儿,你骗我呀,嗯,你的请求不是还是从3000发出去的吗?那我可能诶得给你做出一些限制,哎,怎么怎么的是吧,就如果说服务器做了这个限制,对吧,那如果说同学你把这东西开启了,你是不是又改了这个文件呀,来停脚手架,来开脚手架,你注意看啊,这回我加上了change orange cho,诶,这回咱再试试啊。
19:09
你发现你就能完美的欺骗一下服务器,走获取学生数据啊走哎,学生数据是回来了,回到服务器代码,你发现来吧,同学啊,服务器就认为,哎呀这个请求,哎就是从我自家发出的,哎,所以说同学们一般来说我们把这个要加上,避免产生一些其他的问题,我知道就算不加。也不会有什么太大的问题,但是最好加上是吧?哎,好了,那咱再说说这个,这是干嘛的呀?Pass rewrite,这是干嘛的呀,同学,这叫重写请求路径,这玩意儿有啥用呢?那你注意一下啊同学,接下来呢,我把脚手架停掉。回到服务器代码,我把服务器一呀也停掉,我在服务器一里边再做另外一件事,就是只要有人请求服务器一了呀,我多输出一句话叫做请求的是什么信息,哎,请求的是什么信息呢?
20:15
写一下request.url啊,或者请求的地址是同学,我问一下啊,我问一下。客户端是不是给服务器发请求?是不是得说的明明白白,我要汽车数据还是我要学生数据对不对?那你同学我问一下你去请求服务器,服务器是不是得拿到一下,你要请求我的哪个地址啊是吧?哎,请求服务器的什么信息呀,是吧?哎,来看一下啊,点URL注意看服务器开启node server a写一下啊ER v server1点点S好。服务器一是不是开启了,好嘞。回到我的前台代码当中,在这儿呢,我说了这是重写请求路径,如果你不加就会有严重的问题,这个人咱得说加不加其实没什么太大的影响,但是这个pass rewrite,你要不写你就完蛋了,你看一下啊,Nbm start,走。
21:19
等着啊,等浏览器开启好了,各位浏览器是不是开了来走无关的关掉,你注意看啊。分析一下你的前台代码,如果是带有杠API前缀的请求,我就会把这东西转发给5000对不对?啊,那你这写了确实是杠API开头的students对不对,好来到这儿呢,走,你看看他说啥呢,404。说老师这什么意思呢,是不是没走代理呢,同学其实代理走了,代理走了,他没有找3000要这个students,因为你明确的你说了你加了API1,其实同学请没请求5000请求了,怎么证明请求5000了呢。
22:03
回到服务器代码来吧,兄弟,有没有人请求服务器一,有请求来自于哪儿的?5000的来看请求地址同学,你发现一个特别不和谐的人混进去了,谁API1?同学,服务器能给你响应的地址是杠students,人家可没说能给你响应杠API-students,所以说呢?哎,回到你的前台代码当中,你必须在配置代理的时候加上这句话,就能把请求路径里边的杠API1替换为一个空字符串,这就叫做重写请求路径,这是必须要做的一件事,如果你不做,同学请求根本送不过去,明白不?你这写的不是一个正则的匹配吗?对吧?人家自动就会匹配了,你这加杠API1是为了能让他知道转发给5000,但是你真的就把那种带有杠API1的路径送给5000吗?5000绝对就懵逼了啊。那所以说呢?
23:03
那怎么办呀,你就得把这个API一再送给服务器的时候,哎,再把它干掉,就这回事,那你这搞懂了,这是不是要搞懂了呢?哎,好了,那同学啊,不用自己去记记笔记啊,我都已经给大家整理好了,来我们最后测试一下是不是改了这文件呀,改了就得停脚手架,就得再开启脚手架啊说老师咋这么烦呢?同学啊,由于你改的是很核心的配置,你就必须得重启一下,对吧?那我问一下同学,你在做一个项目的时候,这代理是不是也就配一次呀,是吧?哎,走学生数据走是不是没问题?哎,那汽车数据呢,肯定也没问题吗?啊,那回到给大家的资料里边,同学们在这儿呢?React全家桶其他这里边单独给大家整理了一个markdown文档,叫react脚手架配置代理,希望呢,你把这个文档呢,留下两个方法一,package.json中追加这个配置是吧?啊还有方法二是吧,那来我们大概的看一下啊,方法一呢就是。
24:03
简单直接写。优点就是配置简单,哎,前端请求时可以不加任何的前缀,只要3000没有我就找5000要去。缺点呢,不能配置多个代理,工作方式就是上述配置代理,当请求了3000不存在的资源,那么该请求就会转发给谁5000,也就是说优先匹配什么前端资源没有我再转发给5000。来,我们再看方法二,那么第一步创建代理文件,在src下建立这个东西setup process不允许改名。啊,然后在这儿呢,引入这个,而且这里边详细的注释呢,我都给大家写好了,对吧?Change orange为戳的时候,服务器收到的host就为5000啊,为false的时候呢,收到就是3000,默认值为false,但我们一般呢,给它改成Q,也就说我不想让服务器知道这个请求到到底是来自于哪的,服务器要问我说那请求来自于哪儿的,就告诉他你自己家的是吧,不是3000就是来自于5000的啊,就避免呢,他做一些什么太高级的这个校验,不让咱们去,哎拿到数据是吧,那这个呢,必须得写啊,是去除这个请求前缀的对不对?哎,重写路径啊好,那说明呢,就是优点是可以配置多个代理啊,可以灵活的控制是否走代理,同学,如果你不写杠API1就不走5000的代理,如果你不写杠API2,那就不走5001的代理,对不对?写就走,不写就不走,特别灵活,缺点就是配置有点繁琐啊,而且是前端请求资源的时候必须得加上前缀,你不加API1不加API2,那人家咋知道你请求的是哪个呀,对不对?
25:33
哎,希望大家呢,把这文档呢,咱留下行吧,我把这文档的同学你看着我复制一份。然后呢,也给大家放在咱们这个里边src里,OK,爱叫react脚手架呢,配置代理OK,哎,是得这么玩的,那好我把这些东西呢都关掉,那折叠折叠这src怎么的,我是不是得复制一份啊,把脚手架停掉,SRCCTRLCCTRLV,改个名啊,叫做零四下划线啊src,然后叫什么呢?配置代理给大家讲了两种方式啊,那这小节呢,我们停一下。
我来说两句