springboot+vue前后端分离适配cas认证的跨域问题

0. cas服务搭建参考:CAS 5.3服务器搭建_cas-overlay-CSDN博客

1. 参照springsecurity适配cas的方式, 一直失败, 无奈关闭springssecurity认证

2. 后端服务适配cas:  参考前后端分离项目(springboot+vue)接入单点登录cas_前后端分离做cas单点登录-CSDN博客

1) 引入maven依赖

<dependency><groupId>org.jasig.cas.client</groupId><artifactId>cas-client-support-springboot</artifactId><version>3.6.4</version>
</dependency>

2) springboot相关配置

cas.server-url-prefix= http://localhost:8443/cas
cas.server-login-url= http://localhost:8443/cas/login
cas.client-host-url= http://localhost:8002cors.origins[0]= http://localhost:9527/
spring.main.allow-bean-definition-overriding=true

3) 重写cas重定向策略

@Configuration
@EnableCasClient
public class CasConfig implements CasClientConfigurer, ConfigurationKeys {@Overridepublic void configureAuthenticationFilter(FilterRegistrationBean authenticationFilter) {Map<String, String> initParameters = authenticationFilter.getInitParameters();initParameters.put(AUTHENTICATION_REDIRECT_STRATEGY_CLASS.getName(), CasRedirectStrategy.class.getName());}
}
public class CasRedirectStrategy implements AuthenticationRedirectStrategy {@Overridepublic void redirect(HttpServletRequest request, HttpServletResponse response, String potentialRedirectUrl) throws IOException {/* 通过Origin判断前后端分离项目跨域请求 */if (CommonUtils.isNotBlank(request.getHeader("Origin"))){/* 跨域处理:cas过滤器优先级高,自定义跨域配置无法处理此请求 */response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));response.setHeader("Access-Control-Allow-Credentials","true");/* 自定义状态码,根据实际情况自定义,前端需对应此值 */response.setStatus(HttpStatus.NON_AUTHORITATIVE_INFORMATION.value());}else {response.sendRedirect(potentialRedirectUrl);}}
}

4) 创建login接口处理前端登录请求

@GetMapping("/login")
public void login(HttpServletRequest request, HttpServletResponse response, @RequestParam String url) throws IOException {ResponseCookie cookie = ResponseCookie.from("JSESSIONID", request.getSession().getId()).domain(request.getRemoteHost()).build();response.setHeader(HttpHeaders.SET_COOKIE, cookie.toString());response.sendRedirect(url);
}

5) 跨域配置

@Configuration
@ConfigurationProperties(prefix = "cors")
public class CorsConfig {protected List<String> origins;public void setOrigins(List<String> origins) {this.origins = origins;}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowedOrigins(origins);config.setAllowCredentials(true);config.addAllowedHeader("*");config.addAllowedMethod("*");source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}
}

3. 前端配置

1) 响应拦截器改造

import axios from 'axios'
import { casLogin } from '../utils/cas'let request = axios.create({baseURL: import.meta.env.VITE_BACK_URL,withCredentials: true,
})request.interceptors.response.use(if (response.status === 203) {console.error('ddddddddddddddddddddddd')const url = encodeURIComponent(window.location.href) /* 登录后跳转到原页面 */window.location.href = `http://localhost:8002/cims/login?url=${url}`....}
)export default request

2) (只针对自身服务修改, 非通用) 去掉原有的前端token判断代码

todo:后端服务添加认证过滤器, 需要校验用户信息(从cas服务获取)

实现原理分析:

1) 前端访问后台url

2) 后台服务cas拦截器验证未登录,(正常是跳转到cas登录, 前后端分离服务这里跳转会403CORS跨域)将cas重定向修改为返回指定状态码203

3) 前端服务通过http请求拦截器将203状态码 , 然后以浏览器页面跳转的方式跳转到后台新定义的登录url(并携带最终认证后需要跳转的页面)  http://localhost:8002/cims/login?url=${url}`

4) 后台服务接收到/login请求后,被cas过滤器重定向cas服务

(为啥第2步里返回状态码203,而这里是cas跳转? 因为后台做了跨域配置 CorsFilter, 前端过来的请求返回状态码, 否则是cas跳转)

(前端做了跨域配置, 前端访问后台的url, 实际上也是前端的ip+port, 所以第一次前端访问后台, 是ajax过来的请求,返回状态码, 如果这时不返状态码而是cas跳转, ajax调到cas服务地址就跨域了, 所以这里返状态码, 然后ajax收到状态码, 以浏览器窗口的方式, 直接访问后台真实的url, 后台真实url就会触发cas重定向了)

5) cas服务页面登录成功后, 跳转回/login请求, /login请求会设置session信息,并重定向到最终的即, 最开始请求的那个url

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

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

相关文章

如何系统地自学 Python

设定学习目标 确定自己学习 Python 的目的和用途&#xff0c;这一步很重要&#xff0c;比如是为了编写脚本、开发网站、进行数据分析等。设定清晰的学习目标&#xff0c;把目标拆分为一个个阶段的小目标&#xff0c;通过完成一个个小目标&#xff0c;得到正反馈&#xff0c;激…

SD-WAN解决企业组网中网络卡顿问题

网络卡顿已成为企业组网中一大难题&#xff0c;特别是随着办公应用系统的内网服务器或云端部署&#xff0c;员工对网络的依赖日益增加。面对网络卡顿问题&#xff0c;我们不得不深入思考如何提升工作效率并改善员工体验。本文将深入探讨企业组网中的网络问题&#xff0c;并介绍…

DeepMind基础世界模型Genie:一张草图即为一个世界,通用AI智能体要来了?

一张草图即为一个世界&#xff01;Google DeepMind 推出了首个以无监督方式从未经标注的互联网视频中训练而来的生成交互环境模型——Genie。该模型可以通过文本、合成图像、照片甚至草图来生成无数种可玩&#xff08;动作可控&#xff09;的虚拟世界。 据介绍&#xff0c;Geni…

使用管道和system V进行进程间通信

进程通信的目的 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程资源共享&#xff1a;多个进程之间共享同样的资源。通知事件&#xff1a;一个进程需要向另一个或一组进程发送消息&#xff0c;通知它&#xff08;它们&#xff09;发生了某种事件&#xff08;如进程…

投资生涯的核心密码:构建交易逻辑体系

首先&#xff0c;我们需要明确一点&#xff0c;交易中究竟有没有确定性&#xff1f; 确定性是指在某一种形式、或有若干条件时&#xff0c;价格必然会上涨或下跌&#xff0c;也可以决定上涨或下跌的程度。 我认为&#xff0c;没有。迄今为止还没有一个理论能发现即使确定的东西…

python图像处理初步

文章目录 处理流程灰度分布图 处理流程 在Python中&#xff0c;通过【plt】和【numpy】可以实现图像处理的最简单的流程&#xff0c;即读取图片->处理图片->显示结果->保存结果。 import matplotlib.pyplot as plt import numpy as nppath lena.jpg img plt.imrea…

春节医美热,爱美客、昊海生科谁更赚钱?

在颜值经济赛道上&#xff0c;医美项目逐渐成为消费主流。随着春节假期的到来&#xff0c;医美消费又将迎来高峰期。 “医美三剑客”中&#xff0c;爱美客(300896.SZ)、昊海生科(688366.SH)近日相继公布了2023年的业绩报告&#xff1a;2023年&#xff0c;爱美客预计实现净利润…

白敬亭风波后现身,心情低落进新剧组,父母暖心陪伴。

♥ 为方便您进行讨论和分享&#xff0c;同时也为能带给您不一样的参与感。请您在阅读本文之前&#xff0c;点击一下“关注”&#xff0c;非常感谢您的支持&#xff01; 文 |猴哥聊娱乐 编 辑|徐 婷 校 对|侯欢庭 白敬亭春晚首秀引热议&#xff0c;口碑因“春山学”风波陷两极…

掌握Docker:让你的应用轻松部署和管理

文章目录 一、引言&#xff08;为什么要学习docker&#xff1f;&#xff09;1.1 环境不一致1.2 隔离性1.3 弹性伸缩1.4 学习成本 二、Docker介绍2.1 Docker的由来2.2 什么是Docker2.3 为什么要用Docker2.3.1 虚拟机2.3.2 Linux容器 2.4 Docker与传统虚拟机的区别2.5 Docker的思…

微信小程序(四十五)登入界面-简易版

注释很详细&#xff0c;直接上代码 上一篇 此文使用了vant组件库&#xff0c;没有安装配置的可以参考此篇vant组件的安装与配置 新增内容&#xff1a; 1.基础组件的组合 2.验证码倒计时的逻辑处理 源码&#xff1a; app.json {"usingComponents": {"van-field…

打印水仙花数---c语言刷题

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 题述 求出0&#xff5e;100000之间的所有“水仙花数”并输出。 “水仙花数”是指一个n位数&#xff0c;其各位数字的n次方之和确好等于该数本身&#xff0c;如:153&#…

C++数据库连接池

功能实现设计 &#xff1a; ConnectionPool.cpp 和 ConnectionPool.h &#xff1a;连接池代码实现 Connection.cpp 和 Connection.h &#xff1a;数据库操作代码、增删改查代码实现 连接池主要包含了以下功能点 &#xff1a; 1.连接池只需要一个实例&#xff0c;所以 Connec…

前端工程化面试题 | 17.精选前端工程化高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

高并发系统实战课个人总结(极客时间)

高并发系统实战课 场景 读多写少 我会以占比最高的“读多写少”系统带你入门&#xff0c;梳理和改造用户中心项目。这类系统的优化工作会聚焦于如何通过缓存分担数据库查询压力&#xff0c;所以我们的学习重点就是做好缓存&#xff0c;包括但不限于数据梳理、做数据缓存、加缓…

有哪些非常经典的开源项目?

本文从ABCD角度图解这方面内容。 业界把人工智能&#xff08;Artificial Intelligence&#xff09;、区块链&#xff08;Blockchain&#xff09;、云计算&#xff08;Cloud Computing&#xff09;和数据科学&#xff08;Data Science&#xff09;统称的“ABCD”推崇为颇具潜力…

[力扣 Hot100]Day35 LRU 缓存

题目描述 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存 int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c;否…

@ControllerAdvice 统一管理异常/错误

ControllerAdvice 统一管理异常/错误 文章目录 ControllerAdvice 统一管理异常/错误一、注意事项二、统一管理异常/错误的好处三、代码实现1. 普通方法2. 统一管理ControllerAdvice3. PostMan测试结果 一、注意事项 1. 如果校验注解不指定 message 属性 ,会返回默认消息, 这些…

编译原理之SLR(1)和语法制导的翻译

1.SLR(1)思想&#xff1a; 基于容许LR(0)规范集中有冲突的项目集&#xff0c;用向前查看一个符号的办法进行处理&#xff0c;解决冲突&#xff0c;因为只对有冲突的状态才查看一个符号&#xff0c;是一种简单的LR(1)分析法&#xff0c;用SLR(1)表示 2.SLR(1)分析的简单方法&a…

荣耀MWC发布AI使能的全场景战略

【2024年2月25日&#xff0c;巴塞罗那】荣耀在2024 MWC世界移动通信大会上正式发布了全新的AI使能的全场景战略&#xff0c;推出平台级AI赋能&#xff0c;以人为中心的跨操作系统体验和基于意图识别的全新人机交互&#xff0c;以及与全球合作伙伴合作的荣耀Magic6 Pro&#xff…

Easy-Jmeter: 性能测试平台

目录 写在开始1 系统架构2 表结构设计3 测试平台生命周期4 分布式压测5 压力机管理6 用例管理6.1 新增、编辑用例6.2 调试用例6.3 启动测试6.4 动态控量6.5 测试详情6.6 环节日志6.7 实时数据6.8 测试结果 7 测试记录7 用例分析8 系统部署8.1普通部署8.2容器化部署 写在最后 写…