00:00
好,那刚才呢,我们已经给大家演示了生产环境打包啊,没有跨域的问题。的时候是很简单的是吧,那下面我们要说一下,他如果存在跨域了。也就是说我前台应用。打包以后运行的端口假设是3000。啊,而我后台应用呢,是5000。那这样一请求不就跨域了吗,是吧?那我们前面也简单提过啊,可以由我们的后台工程师了,来去配置代理服务器。啊来去解决,那或者也可以用来去解决。那如果那后台工程师要配置代理这个事情要让你去做,你是不是也能去做了,好,那这里面呢,我们就给大家介绍一个工具。啊,这个工具呢,叫AX。
01:00
这个工具呢,它其实主要的作用是后台用于做集群的,当然大家很多人可能对于集群呢,不是太了解,没关系。啊,其实呢,还可以做一个用,就是作。代理服务器来进行使用。那这里呢,我就跟大家演示一下,我们该怎么去用,但在用N之前呢,我先来去说一个事情。我们现在呢?服务器端,比如说我们再去注册路由的时候,有给他加一个比如说API的基础路径。那现在我们要访问后台的路径的时候,我们的路径在前台要访问的时候,是不是前面这个base就肯定要有一个什么斜杠API了吧,这个懂啊,因为很有可能后台是有一个斜杠API的路径的。当然也不一定是这个名字,但是这个名字的比较居多而已。
02:01
来,我们来看一下啊。好。看行不行,我们呢,先把后台服务器呢,先重新启动一下,因为咱改了代码。好,那下面呢,我们的前台改了以后,它会自动重新运行啊,那我们来去看一下我们当前这个应用能不能去访问到后台的数据了。啊,是没有任何问题的,是可以的,OK,说明我们去加这个斜PI是完全没有问题的,对吧。好,那下面我要对我的。前台应用的代码进行生产环境打包。来打开一个命令行窗口,通过一个命令叫n PM run嘛,Build,这个我们前面讲过是吧。那他就会去对我们的应用进行生产环境打包,并且生成本地的打包文件。
03:01
而且它生成的文件夹目录是叫一个build的文件夹,但这个需要一定的时间,我们可以稍微等待一下,好,那等待一块以后呢,它就会给我们去生成本地的打包文件,也就是build,这整个文件下所有的资源都是它打包生成的,当关键的几个我说一下,一个是index。这是我们的。主页因为我们是个单页应用,所以就有一个完整页面,再一个呢,就是static里面会有一些CSJS啊好。来,那我们后面要运行的项目呢,就是这个build文件夹项目。那我们前面说过,我们可以通过一个静态服务器命令service。Build这个命令来去运行这个项目。那运行这个项目呢,它运行的端口是多少呢?是5001,其实本来他想在5000上面运行的,但是5000已经被我们的后台应用给占用了。
04:05
那现在呢,很自然,我就去访问五千零一来,我们来访问一下看看,应该是存在跨域问题的这里。那先能够去显示到我们的登录页面来,输入密码,点击登录,那此时它会去出现一个什么呢?请求404的问题,我们来看一下network。来再点一次请求。大家看一下是不是有404的问题,所以404很简单,就是因为我们当前在5001啊,请求斜杠API斜杠log前面技术路径没加。那就请求的是当前的应用的5001。而5001是没有人处理这个路径的,只有5000下面才有。
05:00
哎,有人可能说老师我们开环境不好好的吗?因为开环境他我们配置了代理对吧,而我们这里面是没有配置代理的。那下面我们来看一下如何利用NX来去配置代理服务器,实现生产环境的一个跨域问题的解决。啊。这个呢,大家需要知道一下就行啊,来看一下操作里面有些配置了,大家可能不太熟练都没关系啊,首先我要让大家看到一个运行的效果啊,先不讲它的配置啊。双击一下我们的这个,注意这里面有一个文件夹叫NS杠,01:15点二。啊,这里面说一个事情啊。这里有个问题,大家不要在中文目录下面去运行这个N,不然的话运行不了,所以我把这一个文件夹拷贝到一个非中文目录下面,比如说拷贝到work下面吧。
06:08
好,那接着呢,我要去给他。运行起来是不是来双击。它运行起来以后呢,没有任何的界面,我们需要在哪去看呢。来。任务管理器。查看我们的进程啊,它应该会去启动相应的服务,我们来看一下,诶就在这里。它启动两个进程啊,这个不用管它,哎,看到这个了,就说明N几呢已经启动了。我们最终要看的一个配置是这一个配置。上面这个呢,是我做的备份的一个,因为我对它进行了一定的修改,我们能把这个文件呢给它打开。好,打开里面有几个重要的部分。
07:00
这是第一个,而且我给大家写好了一个。相应的注释来说明这个问题。这里面呢,会存在四三个端口。有两个呢,是大家熟悉的,这一个是我们后台应用的账号,这一个呢是我们前台应用运行的账号,这一个呢是N运行的账号,我先不来解释它们的一个关系,我先来访问测试一下,看看能不能解决。跨域的问题。来。这一次呢,我要输的是N,它监听的这个账号的地址,也就是8888。No house冒号啊啊OK,走。那现在呢,大家就能看到了,我们的这个前台应用的界面,当然很有可能你也看到的是可能看到的是首页,也有可能看的是登录页面,也有可能啊,那我们现在很关键,我们现在是不是要请求我的后台应用去登录。
08:07
注意我们当前看到的浏览器,看到账号是8888。嗯。好,点击登录。可以,那说明我们这个已然是解决了跨域问题,那下面我们要说一下它是怎么解决的。好,大家注意观察,我把这个呢稍微缩小一点,我们来看的这个界面啊,来去说进入登录界面去。大家注意啊,观察一个事情,什么事情呢?我们再去访问我们的前台应用的时候,访问我们前台应用,也就反准备访问5001的时候,实际上我们不是直接访问的5100,而是访问的什么呢?8888。对吧,那也就是说我们先是访问了N,而N它在接着帮我们把请求。
09:10
转发请求,谁来给我们返回一个数据呢?实际上他请求的是。5001。给我们的浏览器返回的一个页面。对吧,接着我们浏览器啊,里面会运行JS代码,我在点击按钮的时候。又发了一个是不是以斜杠API开头的请求?对不,在浏览器看来他依然发的是8888的请求。这个号的请求,但是我们的N它。会将我们的请求。去请求转发,请求谁呢,我们的5000。来给我们的前台返回数据。
10:02
那实际上就在说一个事情。大家想想看,现在呢,一共有三个角色,三个端口。来分别是什么呢?分别是第一个是我们的NX。啊N,那N他啊,就是个N吧。来它呢,监听的账号是8888,当然也可以不是这个,可以是别的。这个呢,是我们的前台应用。对吧,是5001。下一个是我们的后台应用。是监听在5000上面。我们浏览器发出去的啊,通过地址栏啊,浏览器发出的请求,无论是我们去地址栏输入,还是我们写JS代码。
11:01
请求的都是8888。那有我们的in啊,它叫反向代理服务器来去。有可能请求5001,有可能去去请求5000给我们返回我们想要的页面或者是数据。那什么时候去请求五千零,什么时候请求5000呢?其实很简单,他就看我们的。地址是否以斜杠API开头,如果以斜杠API开头,那他就会去请求5000。否则就请求我们前台用5001。好,这个他是如何做到的,看到这里。其实重点前面这个很好说是他监听的端口号是888对吧,那我们浏览器发的请求都是对888的请求,他反过来去请求我们的前台应用或者后台应用。
12:04
好,那什么时候会去请求5000呢,这个地方这一个说明就是说它的开头路径开头是以斜杠API开头的。那就会请求我们的后台应用些,那这一个就代表我们请求任意路径,但是它会从上往下匹配。那也就是说这个任意动静其实不包含以斜杠API开头。不知道这个大家是否理解了。其实就这么啊,三个部分,我们的浏览器总是请求888。对吧,也就请求N来帮我们处理它呢,有可能去请求啊5000。来给我们返回数据。只要我们的路径自己写个API开头的。那否则就去请求五千零一来返回我们的前台应用的页面。
13:06
那这个时候啊,我们前面做的一个事情就很关键,我们前面是不是给我们的路径都加了一个斜杠API,我的后台路径对吧,那这样的话。我们就能利用N来去。实现一个啊反向代理,最终去解决啊请求跨域的问题,当然要去解决跨域问题,并不是说一定要用in,而是它也是一个比较不错的选择。啊,能帮我们去解决这个问题。好,这个部分呢,大家需要下去后啊,自己根据我刚才说明测试一下,如果你忘了呢,可以看一下视频。参照的做一做,这样在面试的时候呢,你能跟面试官进行交流,我是会这个技术的,对吧,即使原本不是我的责任,但我也会做。
14:03
行。
我来说两句