后台系统登录改造和跨域 | 学习笔记

开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：后台系统登录改造和跨域】学习笔记，与课程紧密连接，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/667/detail/11333

后台系统登录改造和跨域

内容介绍：

一、进行测试

二、重点

一、进行测试

1.先将 F12打开，但目前访问仍存在一个问题，首先先访问一下，查看是否可以访问到。

由于是默认的，所以名字现在可以随意输入。然后点击登录，首先会发现报了一个错误，这个错误叫 Network Error,从字面上解释叫网络错误，但这个不是一个网络错误而是代码存在问题。

现在先不看问题，先看请求的地址，地址是https://localhost:8001/eduservice/user/login。

会发现这个地址请求的就是本地的8001地址，所以就证明地址已经改过来了，它目前请求的就是本地的8001地址。

但会发现目前报了一个 Network Error，当看到这个错误，证明代码出现了问题。再来查找一下是什么问题，将 console 打开，这里面报出了错误，会发现问题就是下图的问题。

就是在 No ’ Access-Control-Allow-Origin’这个地方的问题，接着看No ‘Access-Control-Allow-Origin’这句话，这句话的含义是不允许这样访问，这个问题在学术上叫做跨域问题。

跨域是通过一个地址去访问另一个地址，这个过程中如果有三个地方任何一个不一样会有跨域。三个地方指的是访问协议、ip地址和端口号。

http叫访问协议，而https不叫访问协议。ip地址就是例如有一个地址是192.168.1.1以及另一个地址172.11.11.11这两个就是不一样的。端口号就比如是9528另外一个端口号是8001，这就是不一样的。由此这三个地方任何一个不一样就会产生跨域。

结合实际再次进行查看，实际是当前项目用的是http://localhost9528:/这个端口，但用这个地址做访问的时候访问的是本地的接口，但本地接口的地址是http://localhost8001：/。这么一比较就会发现他们的协议是一样的都是 http，ip也都相同都是 localhost，但端口号不同。访问的端口号是9528，但本地的端口号是8001，因此通过9528端口不能访问8001，默认它是不允许访问的，因此会出现No ’ Access-Control-Allow-Origin’这个提示，这个问题就是跨域问题。

目前前端的端口号是 http://localhost9528:/，用它访问前端项目，但在前端中要去调接口，接口是 http://localhost8001：/，而这两个端口号是不一样的，所以就会产生跨域的问题。

虽然不能访问，但在实际过程中要使其访问，如果都不能访问那么功能就会做不到。

跨域的解决方式比较常见的几种是：第一种，在后端接口controller添加注解（最常见）（尝试添加注解’@CrossOrigin //跨境解决‘便可以解决这个问题）；

第二种是通过网关解决（网管是之后讲的内容叫getway网关）。接着将接口服务重启一下，最终测试一下最终的结果。

先将内容都注销掉，然后看效果。先重新访问，刷新后再次重新登录，会发现登录进来了，这就是默认的界面。

登录之后看一下请求的地方，有一个叫 login8001，还有一个 info 里面有 name、admin、roles 信息。另外在右上角，就是图片中的蓝色图标

这里就是加的图片的头像，所以现在模拟登录效果已经登录进去了项目，后期可以在里面进行具体开发。这就是改造的登录功能这样就完成了。

二、重点

1.首先要将登录改造出来，按照课上讲的过程包括固定的格式。

第二个要将什么是跨域描述清楚，然后跨域如何解决要记住可以加个注解，重点是跨域这个功能，什么时候跨域，跨域怎么解决。

除这些之外里面有一些细节，在点请求就是 Network 的时候，发现请求中每个请求都是两次，比如 login 两次，info 也是两次，每个都是两次。

都是两次的原因是这是浏览器中的一种机制，就是比如现在要进行接口请求中，它里面两次请求，第一次请求先做一个预请求就是预先先做一个准备，就是测一下现在这个服务能否正常联通，就是先请求一下接口看是否可以连接成功，但这个请求中只看服务器是否能连通，它里面并不会返回任何数据。

当请求可以连通之后，他才会真正发送 get 或 post 请求，因此每个都是两次。

这个就做到了关于登录的改造，所以登录就改成了本地。还有一点是改完配置之后，服务器要重启，不重启那么不可正常使用，因此就是改完文件之后，前端服务器要重启一下。