前后端分离------后端创建笔记(03)前后端对接(下)

 本文章转载于【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客

仅用于学习和讨论,如有侵权请联系

源码:https://gitee.com/green_vegetables/x-admin-project.git
素材:https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码:up4c
项目概述笔记:https://blog.csdn.net/m0_37613503/article/details/128961102
数据库笔记:https://blog.csdn.net/m0_37613503/article/details/128961401
前端笔记:https://blog.csdn.net/m0_37613503/article/details/128961447
后端笔记:https://blog.csdn.net/m0_37613503/article/details/128961569

1、前后端对接,如果出现了不同的服务器和端口

1.1 我们这里出了跨域的错误,但是我们的请求地址是正确的

2 只要我们解决了跨域问题,就没问题了,解决跨域问题的方法有很多,你可以在前端,在Ngnix里面做一个反向代理,或者在springBoot中使用CORS,使用比较简单,只要配置一个CORS的过滤器就行

 

2.1

3 我们在后端上的处理方式也有很多种,一种是在控制器中加入注解:

3.1

4 @CrossOrigin,加上这个注解就可以处理跨域,100%可以用,但是加了这个注解,控制器1,控制器2,控制器3,控制器4都要加这个注解,就是啰嗦了一点。

4.1

5 我们可以做一个全局的跨域处理,写一个配置类,配置一个跨域的过滤器,我们先找到我们的config目录 

5.1新建一个类

 5.2 先写一个注解

 5.3 配置一个Bean

 5.4 在这个里面做跨域的处理

 5.5 你在这个里面,要配置一个源对象,这里不是这个

 5.6 这里是这个,创建一个这样的对象

 5.7 通过这个配置对象,设置一些东西,提供一些配置方法

 5.8 这里的核心重点是这个东西,允许谁来异步访问

5.9  允许谁来异步访问那,允许所有写*,如果允许某部分,就只写某个域名或者ip

 5.10 如果你想写多次的话,这里的方法你可以写多次

 5.11 我们跨域调用,有时可以写cookie,你需要把这个cookie传过来,你需要把这个设置为true

 5.12 你允许那些方法

5.13  允许什么样的方法,允许get,post,还是其他的方法,想偷来写*

 

 5.14 你要拦截那些资源,你要固定那些资源你要进行处理

 

 5.15 通过调用这个类的方法,来过滤这个类

5.16 第一个注册参数拦截的是匹配规则,第二个是我们刚才的配置类

 5.17 拦截所有和携带参数 

5.18 最终我们要这个过滤器

5.19 给他配置出来

 6、这里的代码你就参考一下就行,不用天天写,天天写的是业务功能性的代码 

6.1

7 笔记上写的

 

7.1

8 之后重启一下

 

8.1

9 重启之后,我们再做一下登录的处理,看看能不能成功登录,点击刷新,再点击登录 

9.1

10 仍然报跨域问题

10.1

11、允许头信息也必须写

 

11.1

12 添加完请求头信息之后,重新刷新一下

 12.1

13 做一下刷新,重新做一次登录

 13.1

14、我们成功登录进来了,我们看一下login的请求 

14.1

15 我们是发送了一个login请求,这个请求是发到了后端4个9

15.1

16 payload载荷

 

16.1

17 reponse返回的数据,前端模拟是写死的数据,这明显是我们后台产生的uuid,这样我们的前端就对接成功了,前端项目访问后端项目,对接的重点在于解决跨域问题

 

17.1

18 可以用redis看一下数据,未注销前

18.1

19 点击注销

19.1

20  注销之后redis数据消失

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/89557.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

新增守护进程管理、支持添加MySQL远程数据库,支持PHP版本切换,1Panel开源面板v1.5.0发布

2023年8月14日,现代化、开源的Linux服务器运维管理面板1Panel正式发布v1.5.0版本。 在这个版本中,1Panel新增了守护进程管理功能;支持添加MySQL远程数据库;支持添加FTP/S和WebDAV的SFTP服务;支持PHP版本切换。此外&am…

测试架构师如何落地性能测试方案(一)

背景描述: 最近刚接手一个新项目,在最开始的时候要求对这个项目做性能测试,产品经理也给不出性能需求,只因为这个项目是电商项目,可能会有高并发,秒杀的场景,所以产品经理要求我们对这个项目必…

深入浅出 栈和队列(附加循环队列、双端队列)

栈和队列 一、栈 概念与特性二、Stack 集合类及模拟实现1、Java集合中的 Stack2、Stack 模拟实现 三、栈、虚拟机栈、栈帧有什么区别?四、队列 概念与特性五、Queue集合类及模拟实现1、Queue的底层结构(1)顺序结构(2)链…

echarts3d柱状图

//画立方体三个面 const CubeLeft echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 9.5, //柱状图宽zWidth: 4, //阴影折角宽zHeight: 3, //阴影折角高},buildPath: function (ctx, shape) {const api shape.api;const xAxisPoint api.coord([shape.xValue, 0]);con…

c++ 有元

友元分为两部分内容 友元函数友元类 友元函数 问题&#xff1a;当我们尝试去重载operator<<&#xff0c;然后发现没办法将operator<<重载成成员函数。因为cout的输出流对象和隐含的this指针在抢占第一个参数的位置。this指针默认是第一个参数也就是左操作 数了。…

AutoDL服务器的镜像版本太高,配置python3.7 tensorflow1.15版本的框架的步骤

1.选择一个实例&#xff0c;进入后端界面 2. 更新bashrc中的环境变量 conda init bash && source /root/.bashrc查看虚拟环境 conda info --envs可以看到此时有一个base的虚拟环境 但是它的python版本为3.8.10&#xff0c;无法安装tensorflow1.15,所以我们要创建一个…

基于Java+SpringBoot+Vue的网上图书商城设计与实现(源码+LW+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

[保研/考研机试] KY85 二叉树 北京大学复试上机题 C++实现

题目链接&#xff1a; 二叉树https://www.nowcoder.com/share/jump/437195121692000296981 描述 如上所示&#xff0c;由正整数1&#xff0c;2&#xff0c;3……组成了一颗特殊二叉树。我们已知这个二叉树的最后一个结点是n。现在的问题是&#xff0c;结点m所在的子树中一共包…

k8s 自身原理 2

前面我们说到 K8S 的基本原理和涉及的四大组件&#xff0c;分享了前两个组件 etcd 和 ApiServer 这一次我们接着分享一波&#xff1a; 调度器 scheduler控制器管理器 controller manager 调度器 scheduler 调度器&#xff0c;见名知意&#xff0c;用于调度 k8s 资源的&…

cmake-ibmtpm1682编译

1、error Ossl library is using different radix 异常解决 RADIX_BITS由 64改成32 --whole-archive CMakeFiles\ibm-tpm-my.dir/objects.a -Wl, --no-whole-archive CMakeFiles\ibm-tpm-my.dir\linklibs.rsp CMake中的 --whole-archive以及–no-whole-archive两者都是编译器…

新能源汽车需要检测哪些项目

截至2022年底&#xff0c;中国新能源车保有量达1310万辆&#xff0c;其中纯电动汽车保有量1045万辆。为把好新能源汽车安全关&#xff0c;我国新能源汽车除了完善的强制性产品认证型式实验外&#xff0c;还建立了“车企-地方-国家”逐级上报的三级监管体系实行新能源汽车全生命…

opencv 基础54-利用形状场景算法比较轮廓-cv2.createShapeContextDistanceExtractor()

注意&#xff1a;新版本的opencv 4 已经没有这个函数 cv2.createShapeContextDistanceExtractor() 形状场景算法是一种用于比较轮廓或形状的方法。这种算法通常用于计算两个形状之间的相似性或差异性&#xff0c;以及找到最佳的匹配方式。 下面是一种基本的比较轮廓的流程&…

这所985非常难考,却无数人趋之若鹜!

一、学校及专业介绍 厦门大学&#xff08;Xiamen University&#xff09;&#xff0c;简称厦大&#xff08;XMU&#xff09;&#xff0c;位于福建省厦门市&#xff0c;位列国家“双一流”、“985工程”、“211工程”重点建设高校。 1.1 招生情况 厦门大学初试考847信号与系统…

LeetCode面向运气之Javascript—第27题-移除元素-98.93%

LeetCode第27题-移除元素 题目要求 一个数组nums和一个值val&#xff0c;你需要原地移除所有数值等于val的元素&#xff0c;并返回移除后数组的新长度 举例 输入&#xff1a;nums [3,2,2,3], val 3 输出&#xff1a;2, nums [2,2] 输入&#xff1a;nums [0,1,2,2,3,0,4,2…

Spring-2-深入理解Spring 注解依赖注入(DI):简化Java应用程序开发

今日目标 掌握纯注解开发依赖注入(DI)模式 学习使用纯注解进行第三方Bean注入 1 注解开发依赖注入(DI)【重点】 问题导入 思考:如何使用注解方式将Bean对象注入到类中 1.1 使用Autowired注解开启自动装配模式&#xff08;按类型&#xff09; Service public class StudentS…

vue3 使用@vue-office/excel预览本地excel文件 demo

vue3 使用vue-office/excel预览excel文件 demo 显示如下&#xff1a; npm地址&#xff1a;https://www.npmjs.com/package/vue-office/excel vue-office还有pdf和docx&#xff0c;按需下载对应插件 npm install vue-office/excel vue-demivue代码如下 app.vue <templ…

【Leetcode】79.单词搜索

一、题目 1、题目描述 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中,返回 true ;否则,返回 false 。 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中“相邻”单元格是那些水平相邻或垂直相邻的单元格。同一个单元格内…

小白如何轻松制作产品帮助中心页面?

产品帮助中心是每个网站/产品必不可少的页面&#xff0c;产品帮助中心页面成为了企业提供客户支持和解决方案的重要组成部分。对于初次接触建立帮助中心页面的小白来说&#xff0c;也许会感到一些困惑和无从下手。本文将为小白介绍如何轻松制作产品帮助中心页面&#xff0c;帮助…

JZ38 字符串的排列

题目地址&#xff1a;字符串的排列_牛客题霸_牛客网 题目回顾&#xff1a; 解题思路&#xff1a; 这里用到了全排列和剪枝。 首先我们来说全排列&#xff0c;设置一个vis数组来记录当期元素是否被使用过&#xff0c;然后dfs遍历整个数组&#xff0c;列出所有符合条件的路径就是…

你选的产品真的适合做独立站吗?用这5种方法测试一下吧!

跨境电商行业圈里流行一句话“七分靠选品&#xff0c;三分靠运营”&#xff0c;一个独立站新手卖家要想在跨境电商这个庞大的行业体系里分得一块蛋糕&#xff0c;不深入了解一些选品的技巧恐怕很难做出成绩来。 很多独立站赚不到钱的原因在于选品上的失败&#xff0c;如果你的…