00:00
下面呢,我们来看这个跨域,刚才在已经测试出来了,是调用到了,但是它不能访问,报错了,出现了跨域问题,那我解释一下啊,什么叫跨域,给各位说明啊,跨域指的是呢,一个地址去访问另外一个地址,或者访问另外一个资源,这个过程中呢,有三个地方。哪三个地方,第一个叫访问协议?第二个叫访问的那个路径,或者说访问的IP地址和域名,第三个叫访问的这个端口号,三个地方有任何一个不一样就不能访问,访问会产生跨域。那咱说的具体点啊,访问协议什么叫协议,比如说啊,你通过HTTP去访问HTTPS协议是不一样,它就会有跨域第二个IP或者域名,比如说你现在啊,通过。192。去访问172肯定不一样,另外端口号这最好理解,咱们前端的端口号用的是不是叫95281,我后端用的是不是叫8301啊,两号是不一样啊,所以它会产生跨越,这是它的一个说明,三个地方访问协议,IP地址,端口号有任何一个不一样,会产生跨域。
01:24
另外各位要记住啊,跨域的本质是什么呢?它是浏览器对阿贾克斯请求的一种限制,当这三个地方任何一个不一样,它是不能访问的,是浏览器对艾克斯的一种限,在前后端开发中都要考虑到跨域这个问题,这各位记住啊,包括大家看我们这里边。我们目前呢,前端是9528,后端是8301端口号是不一样,所以它就不能访问,访问会产生跨域,这各位知道一下啊,而跨域出来之后,下面咱说一下怎么进行解决这个跨域解决方式,方式有很多很多种方式啊,我都说一下,首先第一种方式。
02:11
咱们可以在我们的后端接口的CTRL上边添加一个注解,让它允许跨域访问。然后第二种方式,我们可以使用一个技术叫HTP解决,包括第三个咱们可以通过那个网关,比如这个叫getway。网关来解决,这些后面都会做到,咱们现在先用第一种方式,在CTRL上边加个注解,允许它跨域访问,那下面我们来加一下啊,来到登录的CTRL上边加上一个注解,这个注解这个注解叫C。这个注解它就为了解决跨域的这个问题,包括啊,咱们在前面阶段中,我们在每个CTRL上边都需要加这注解,要不然都会产生跨域问题,因为前端调后端用的是阿贾克斯,它里边端口号不一样,会有跨域,所以目前我们给他都加上。
03:12
这样的话跨域就可以解决,这是我们的说明,然后这个写完之后,咱把服务器重新启动,最终是下效果,各位要知道啊,什么叫跨域访问协议IP地址,端口号有任何一不一样,不能访问,反而会有跨域,然后怎么解决,可以在CTRL上边加注解,或者还有其他方式。这个啊,咱们这么一个说明,然后咱们把服务器启动,最终我们再来试一下,这个最终的结果,咱们试一下啊。我这位置先刷新。然后刷新之后,我现在点登录大家看啊,是不是登进去了,包括你看它下面也请求了我们这个路径,包括log in,包括info,它的路径都是我本地的8301的端口号,目前就成功了,咱们目前也登录进来了。
04:06
所以这是关于我们登陆的一个改造,各位把它能改造出来,另外里边特别进入一个跨域的是什么,包括它的解决方式,这个就说到这里啊,然后这个之后呢,最后一个小问题大家看啊,我现在能登录,比如我现在我退出。你发现是不是退不出去了,那我说一下怎么做啊,说一下怎么退出,咱们这个退出呢,其实你可以写个接口,但是不需要咱通过前端就可以了,那我下面通过前端改一下退出,咱看怎么改啊。首先咱们找到一个文件,我带着各位找一下啊,应该是在这里边。在这个死model里边有个user,然后user里边呢,你看啊,下面有很多的调用,第一个捞,第二个info,第三个叫退出,而它这里边咱先看这个登录里边,它登录之后呢,是把数据放到了这个cookie里边去,咱看这方法中啊,你看啊。
05:10
向cookie中是放了数据啊,那问各位啊,你说我们登录向cookie中放数据,我退出怎么做呀?怎么做,从cookie中把数据清空,是不是就退出了,就这过程,所以我们看啊这个退出的方法,退出方法里边呢,它掉了接口,但是其实目前咱们不需要调接口,我只需要把cookie清空是不是可以了,那这里怎么做说这过程啊,你把这个调的过程给他注掉就可以了,就是这个代码。你看啊,这个代码比如给它注掉,咱给他注调一下啊,直接把这行注释掉,然后这三行也注释掉,咱就把这个四行代码注释掉,它就可以退出,因为退出就是清空cookie,然后重新加载页面就可以了,那这个改完之后,最后咱们把前端重启一下试一下啊,CTRLC停止。
06:06
再启动。注意这个过程啊,退出就是清空cookie,那我把它那个调的代码这四行注掉,这行代码就是清cookie,然后这是重新加载这个过程,这就是退出,咱们启动试一下啊。我这里边已经登录了,然后现在点logo out,大家看是不是退出去了,包括可以登录。可以退出。所以说以上就是咱们完成的项目的前端环境搭建,包括把登录改造成了本地,另外咱们讲到这个跨域的问题,各位把这个环境能搭建出来,咱们下面要在环境中完成咱们这个讲师模块的前端的整合开发。
我来说两句