day05【讲师管理模块前端开发】/03-尚硅谷-谷粒学院-后台系统登录改造和跨域

就下面咱来测试啊，但是测试呢，我先把F12打开。当然给大家先说明啊，目前要访问是会有一个问题的啊，这问题我现在来演示，首先咱先访问一下啊，咱看其他能不能访问到，怎么访问的，这个名字其实可以现在随便输入，因为咱是默认的啊，然后我点这个登录咱看啊，首先我们看这里边直接报一个错误。给大家强调啊，这错误叫network I从直面上解释是不是叫网络错误，但这不是网络错误，是你代码有问题。这里边叫network，就看到他不要认为是网络错误，他报的就是这个东西叫net I，现在代码有问题，但是前先不看这问题，咱先看我们请求的地址，大家看这地址啊，看这个地址。各位应该能看到这个地址，现在你看请求的是不是就是咱们本地的。801地址，这就证明咱这地址已经改过来了，他目前请求的不是那个就是一就是e Mo中地址，而是本地的801，但是目前你发现他报了一个叫那个啊，大来看下这个错误啊。

叫network I，当你看这错表示你的代码肯定有问题啊，那咱看什么问题啊，咱把这console打开大家看啊，这里边又爆出了这个错误啊，就是他的问题，我们看到是这个问题。就这部分啊，而他问题呢，其实主要里边就是在这个地方。啊，是在这个地方。啊，我把这个啊给大家截过来啊，一会儿咱解释这是什么东西啊，就是前五步咱都做到了，然后咱们往后看啊，就是第六步。咱们最终测试现在出现了问题，它的问题就是咱们刚才看到的这个问题。那这问题是什么？咱来详细说一下啊，这是我要讲到的。啊，那我们看啊，首先大家看在里边，咱就看这段话，就看这段话。

这段话什么意思呢？你看啊，有一个叫no。No是不是不或者说没有的意思啊，叫no这个access control no什么意思呢？也就是说现在你这么访问，它不被允许，Allow是不是有允许意思再访问，然后这CTRL有控制吗？就是现在你这么访问，它不允许你这么访问，那他为什么不允许，给大家解释一下啊，这个问题呢，在咱的术语上描述有一个说法，它叫什么呢？它叫这个问题。叫做跨域问题。啊，就是目前给大家提到这个问题叫做跨域问题。那我先解释一下什么叫跨域，然后再说一下我们目前的跨域是怎么出现的啊，包括这个课件应该是在我们接口那那个里边有啊，但当时我提到咱们今天会讲到啊，就是在这里边有那个咱就不看了啊，直接看我这个位置。

解释一下什么叫跨越啊？那我强调啊，跨域指的是啊，比如说你现在通过一个地址去访问另一个地址过程中，如果你的过程中有三个地方不一样，它会有跨越。啊，就是通过一个地址去访问。我先写，然后咱具体解释啊，去访问就是另外的一个地址，而在这个过程中，如果说你有就是三个地方。啊，三个地方中的任何一个不一样。它就会有跨越，那这三个地方指的是什么？给大家说一下啊，有这么三个地方，第一个叫做访问协议。第二个叫做IP地址。啊，IP地址第三个叫做端口号，就是三个地方有任何不一样，叫跨域，那这三个什么意思，看第一个啊，它叫访问协议，比如说你有一个叫HTP，或者说有一个叫HTPS。

这两个是不一样，这叫访问协议，然后第二个叫IP地址，这好理解了，比如说你有一个地址是192.168.1.1，包括你有另外一个地址叫幺七二点。啊，11.11.11，比如随便写个地址。这两个肯定不一样，然后第三个端口号，就是比如说你是。9528另外端有号，比如是这个8001这些不一样，跟你这三个地方有任何不一样，都会产生跨域啊，这是我们设计个问题，就是这三个地方访问协议IP地址，端口号有任何一个不一样，会有跨域，那咱只有我们的实际，大家看一下啊，我们实际是什么情况呢？第一个各位看啊。我当前的项目用的是不是这个local house9528这个端口啊，这是咱们当前项目给大家截过来啊，就是当前我们是。

这个地址。用的是local house的9528啊调大一点，但是你注意啊，我们用这个地址，咱在做访问的时候，咱访问的肯定是我们的本地的接口，而我本地接口它是什么地址啊，咱是不是HTP冒号杠杠local house，咱是8001，我们是不是这个地址，所以正一访问问题又出来了，咱比较一下啊第一个。他们的协议一样的，都可以TP，第二个IP都一样，都是local house，但是第三个出来了，大家发现我这个端口号。就这段号是9528。啊到这里啊，它是928，而我那个就是本地的接口是不是8001啊，所以大家发现这两个端口号，它认为是不是就是不一样了，所以这个过程中，在默认情况下它是怎么样的，你通过9528端口不能让去访问801，默认它是不允许访问的，会给你出现这个提示，说什么no access control alone不允许访问，这个问题就叫跨域问题啊，所以给大家这个说明，咱比较应该也能看到用9528去访问八零幺两个端口号肯定不一样，所以咱们现在访问它是不让咱们直接访问的，它会出现一个这个提示，这提示就叫做跨域问题。

这给大家做了一个说明啊，你把问题给聊清楚啊，包括这个问题咱后面会一直遇到，你做这个前后端开发中跨域问题会一直出现，这个问题也是咱们最常见的问题叫跨越。这个啊，给大家做了一个说明，然后我最终再通俗的解释一遍啊，就最简单解释一下。

什么意思呢？我现在前端的端口号是local house959528，这是咱们前端，我用它访问我们的前端项目，但是我在前端中要去调咱的接口，咱接口是不是这个local house8015，而这两个地方中端口号是不一样的，所以它就会产生跨域的问题啊，就默认它不能访问，这个不能访问问题就叫跨域。所以各位把这问题给他记住啊，跨域就是里边这个访问协议我大概写一下啊。访问协议。包括这个IP地址，还有这个叫端口号，三个中有任何不一样，都默认不能访问到它，这问题就叫跨域问题。啊，这问题给大家做一个说明，给大家知道啊，但是大家注意啊，它默认不能访问，但是咱实际中是不可能让它能访问，在功能才能做到，如果你都不能访问，那它功能肯定做不到嘛，所以咱们最终说一下这问题该怎么去解决，就跨域的解决方式。

小这位置啊，第七个。跨域的解决方式。这给大家啊，特别说一下啊，首先我强调跨域呢有很多种解决方式，而咱在实际的项目中比较常见的有这么几种啊，但是我强调不是只是我说这几种有很多种，只是我说这个比较常见，首先第一种方式是最常见的，很简单，咱做法就是在我们的后端接口那个CTRL上边。啊，CTRL上边咱们添加一个注解就可以做到，这是我们最常用的方式，咱一般都这么来做，在CTRL上边加个注解就可以了，那我给大家加一下啊，这注解要各位记住啊，咱们刚才CTRLL这个CTRL，然后我加个注解，注解的名字，这个名字叫cross这个注解。

这注解就表示它就用来解决跨域，就是当你不加这注解，默认不能访问，当你加上之后，它就让你能够就是跨域定访问，这是我们的解决方案，在你的CTRL上面加个注解，这注解就是C这个注解啊，这个方案就可以做到。这是第一个解决方案，咱后面肯定基本上都这么来做，所以大家知道啊，也就是说呢。咱们后面再写代码的时候，每次在考上边咱都需要加上它，不加的话都会有跨域啊，包括这烙印，比如咱来到teacher里边，Teacher里边也会有跨域，所以咱在这位置也需要加这注解，就是cross这个注解。每个里边都需要加上啊，这是我们说的第一种解决方案，就是加注解来做的，然后还有第二种方案。这些方案先提一下，咱后面会演示到啊，第二个就是。

答案是用一个东西啊，叫这个来解决。叫网关来解决，这网关其实是咱后面讲那个里边一个东西叫getway网关，对咱后面会讲到啊，大家需要一个了解啊，就是后面会讲到。咱们现在啊，先用第一种方案，在CTRL上面加注解就可以了啊，所以咱们这么做的话，这个问题可以解决啊，这就叫跨域这么一个问题。所以咱们就说完了啊，然后说完之后，最后咱来就是把这个接口服务重启一下，最终测试一下，看一下最终的结果。啊，咱最终测试。所以说啊，它先启动着，我再强调啊，就刚才给大家应该说了很多，通过这个功能，我主要说的第一个就是这个登录接口这个过程啊，咱就是改这个前端，包括加接口这个啊，是一个模拟一个过程，给大家知道一下啊，然后第二部份很重要，咱说这个叫跨域，就是你三个地方协议IP端口号有任何一个不一样，会有跨域，答案现在是通过9528去访问8001端口号肯定不一样，所以它有跨域，所以咱默认不能访问，它就出现这个错误。

而不能访问跨域怎么解决多种方案，咱今天说第一种方案，在CTRL上边加上这个CS，这个驻点就可以解决，加上之后它就能让你跨域访问了，不加的话反不到。后面给大家稍微讲一个那个网关的解决方式，今天我们先这么来做。啊，所以这个完成了啊，然后完成之后，最后咱们把效果我们来试一下啊，这些我先都给它注掉啊，然后咱最终测试一下啊。我先重新访问啊，咱重新刷新。F啊，重新刷新，帮我把这个点开啊，然后刷新之后大家看啊，我现在再点这登录，我们看到啊，大家看到效果，现在是不是登进来了，这就是他那个默认的界面啊，已经登录成功了，然后登录之后咱看一下他请求的地方啊，有一个叫log in。

咱是801返回这个值，还有一个叫info info里边呢有这些信息，而信息中比如有什么名称，角色，其实就是这个显示，另外你看在我的右上角。这个地方，这就是咱们刚才加那个图片，那个图像这些都有了啊，所以咱现在把这个我们就模拟出这个登录效果，已经登录进去了，我们这个项目后面咱在里边就来做这个具体开发。啊，这个啊是咱们改造的这个登录功能我们就完成了啊，所以各位第一个你把登录能改造出来，按照我这过程啊，包括它固定的格式，然后第二个重点，各位把这个什么叫跨域给他要能够描述清楚，然后第二个就是跨域怎么解决，要给他记住咱是加一个注解啊，重点是这个跨域这个功能我重点要讲的，也就是说这个跨域什么时候跨域，跨域怎么来解决。

所以咱们把这个说完了啊。然后说完之后呢，在里边啊，有一个小细节给大家说一下啊。杨宇同学也在，可能私下的同学会问这种细节问题，我说一下什么问题啊，大家仔细看啊。你看我现在在请求的时候，就是你点这个network，你发现请求中每个请求是不是都是两次，比如love in两次，Info是不是也是两次，每个都是启了两次，那它为什么启用两次，给大家解释一下啊，这是它里边可以说是浏览器中一种机制。什么机制呢？打开第一个请求大家看看这个hi的。你看里面啊，首先这个请求叫post，但是我第一次请求是不是叫options。

然后第二个才是post，包括info也一样，第一次叫options，第二次才叫get，那这什么意思呢？给大家强调，就比如说我们现在你要请求，就是你要进行接口请求过程中，它里边两次请求，第一次请求干什么呢？你可以理解为啊，它先做一个角预请求就是预先先做一个准备，什么叫预请求？就是现在先测一下你这个服务能不能给你正常联通，就是他先请下这个接口，看接口能不能连接成功通，但是它这启目中只是测服务器能不能连通，它里边并不会返回任何数据，当你这个请求能连通之后，他再去真正发送get或者破请求，是这么来做，所以每个都是两次，第一次先测试服务是否能联通，能联通再真正发请求，所以你发现啊，每个都是两次，第一次测服务器是否联通，第二次。

正去请求就这个，各位要给他知道一下啊，比如说你看到不用觉得奇怪，它就是两次，第一次监测联通无气的效果，第二次再发请求。啊，这个我们就做到了啊，关于登陆的改造。所以登录咱就改成了本地。这张图给大家保存一下啊，第二个改造登录啊，到我们的本地的接口。这个过程各位啊，按照这个流程能给他做到每一步我应该都写到了啊，就是你改配置文件，帮我写接口，然后就是还有一点啊，改完配置文件之后，你的服务器要重启啊，不重启它不好使，比如说你改了这个文件之后，你的前端服务器要重启一下，不重启不好使啊，不要后面再找我解决这个问题，老师为什么不好使，我说你是不是没重启，他告诉我说哦，忘了重启了。这个啊，特别说明啊，然后这个做到之后，后面要说这个跨域，你知道什么叫跨域，包括解决方案，这个咱就说完了啊。