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

简介: 快速学习后台系统登录改造和跨域

开发者学堂课程【微服务+全栈在线教育实战项目演练(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 打开,这里面报出了错误,会发现问题就是下图的问题。

image.png

就是在 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 信息。另外在右上角,就是图片中的蓝色图标

image.png

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


二、重点

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

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

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

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

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

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

相关文章
|
前端开发 数据库 数据安全/隐私保护
【项目实战】登录与注册业务的实现(前端+后端+数据库)
【项目实战】登录与注册业务的实现(前端+后端+数据库)
1279 0
【项目实战】登录与注册业务的实现(前端+后端+数据库)
|
7天前
|
SQL 前端开发 API
前端登录流程
前端登录流程
7 0
|
5天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
22 1
|
5天前
|
前端开发 算法 JavaScript
实现注册登录时数据的加密传输(含前后端具体代码)
实现注册登录时数据的加密传输(含前后端具体代码)
|
3月前
|
移动开发 小程序 数据管理
9月开发者日回顾|小程序跳转接口等多个JSAPI更新,能力集成提供场景化排查工具
9月开发者日回顾|小程序跳转接口等多个JSAPI更新,能力集成提供场景化排查工具
28 0
|
7月前
|
缓存 小程序 前端开发
【易售小程序项目】请求包创建+登录功能实现【基于若依管理系统开发】
【易售小程序项目】请求包创建+登录功能实现【基于若依管理系统开发】
64 0
|
8月前
|
Web App开发 缓存 前端开发
前端用到的一些功能
前端用到的一些功能
40 0
|
前端开发 小程序
200多套小程序源码后台+前端
200多套小程序源码后台+前端
122 0
|
前端开发 JavaScript 关系型数据库
后台系统登录功能改造(1) | 学习笔记
快速学习后台系统登录功能改造(1)
152 0
|
前端开发
前端项目实战34-登录失败控制
前端项目实战34-登录失败控制
69 0