springsecurity+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/699006.shtml

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

相关文章

鸿蒙LiteOS-M 内核初始化

目录 一、LiteOS-M 初始化内核二、LOS_KernelInit代码分析三、LOS_Start代码解析坚持就有收获 一、LiteOS-M 初始化内核 在LiteOS-M应用程序中&#xff0c;系统初始化如下&#xff1a; /*** brief This is the ohos entry, and you could call this in your main funciton af…

2024如何恢复旧版的Chrome的主题样式

起因 chrome 更新版本之后的主题样式变成了浅紫色的页签卡样式&#xff0c;感觉很不习惯&#xff0c;也很不喜欢 如何换回旧版主题 通过主题商店&#xff0c;安装旧版本的主题 主题商店搜索下面&#xff0c;或着直接访问下面的地址 Chrome Original White Theme https://…

vue手写卡片切换,并且点击获取到卡片信息

需求&#xff1a;做一个卡片样式的列表&#xff0c;之后有一些基本信息&#xff0c;之后卡片选中后样式不一样&#xff0c;默认选中第一个卡片&#xff0c;点击卡片后可以获取到卡片的信息 一、效果 二、关键代码 index默认重0开始,activeTable默认为0,0-0等于0&#xff0c;但…

Facebook的数字社交使命:连接世界的下一步

在数字化时代&#xff0c;社交媒体已成为人们生活的重要组成部分&#xff0c;而Facebook作为其中最具影响力的平台之一&#xff0c;一直以来都在努力履行着自己的使命——连接世界。然而&#xff0c;随着时代的变迁和技术的发展&#xff0c;Facebook正在不断探索着连接世界的下…

Kafka:kafka的技术架构? ①

一、Kafka的优势 Apache Kafka是一个开放源代码的分布式事件流平台&#xff0c;成千上万的公司使用它来实现高性 能数据管道&#xff0c;流分析&#xff0c;数据集成和关键任务等相关的应用程序。 二、技术架构 0&#xff09;partition分区可以设置备份数&#xff0c;也可以设…

Go 如何按行读取(大)文件?尝试 bufio 包提供的几种方式

嗨&#xff0c;大家好&#xff01;我是波罗学。本文是系列文章 Go 技巧第十七篇&#xff0c;系列文章查看&#xff1a;Go 语言技巧。 本文将介绍 Go 如何按行读取文件&#xff0c;基于此会逐步延伸到如何按块读取文件。 引言 我们将要介绍的按行读取文件的方式其实是非常适合…

C# 1.消息队列MQ使用场景--图文解析

为什么使用消息队列MQ&#xff08;Message Queue&#xff09;&#xff1f; 消息队列有什么优点和缺点&#xff1f; Kafka(大数据日志采集)、ActiveMQ(最早的MQ--目前使用较少)、RabbitMQ(开源&#xff0c;中小型企业使用足够)、RocketMQ(阿里开发&#xff0c;大型企业适用) 都…

125 Linux C++ 系统编程4 Linux 静态库制作,动态库制作,静态库和动态库对比。静态库运行时找不到库的bug fix

一 静态库 和动态库 对比 静态库的原理&#xff1a;假设我们有一个 静态库&#xff0c;大小为500M&#xff0c;这个静态库实现了一些打牌的逻辑算法&#xff0c;提供了一堆API&#xff0c;让开发者 可以轻松的实现 54张扑克牌的随机发牌&#xff0c;指定发牌等功能。 我们写了…

Python入门学习——基础语法

一、Python解释器 1. Python解释器的作用是&#xff1a; 将Python代码翻译成计算机认识的O和1并提交计算机执行在解释器环境内可以一行行的执行我们输入的代码也可以使用解释器程序&#xff0c;去执行".py"代码文件 2. Python解释器程序在&#xff1a; <Python…

google浏览器chrome无法访问localhost等本地虚拟域名的解决方法

场景一&#xff1a; 谷歌浏览器访问出现&#xff1a;forbbiden 403 问题&#xff0c;或者直接跳转到正式域名(非本地虚拟域名) 访问本地的虚拟域名http://www.hd.com/phpinfo.php?p1发生了302 条状 火狐浏览器正常访问; 解决方法&#xff1a; 方法1&#xff1a;在谷歌浏览器…

Linux的ACL权限以及特殊位和隐藏属性

前言&#xff1a; ACL是什么&#xff1f; ACL&#xff08;Access Control List&#xff09;是一种权限控制机制&#xff0c;用于在Linux系统中对文件和目录进行细粒度的访问控制。传统的Linux权限控制机制基于所有者、所属组和其他用户的三个权限类别&#xff08;读、写、执行…

转运机器人,AGV底盘小车:打造高效、精准的汽车电子生产线

为了满足日益增长的市场需求&#xff0c;保持行业领先地位&#xff0c;某汽车行业电子产品企业引入富唯智能AMR智能搬运机器人及其智能物流解决方案&#xff0c;采用自动化运输措施优化生产节拍和搬运效率&#xff0c;企业生产效率得到显著提升。 项目背景&#xff1a; 1、工厂…

milvus Delete api写s3的流程

Delete api写s3的流程 milvus版本:v2.3.2 整体架构: Delete 的数据流向 delete相关配置 dataNode:segment:insertBufSize: 16777216 # Max buffer size to flush for a single segment.deleteBufBytes: 67108864 # Max buffer size to flush del for a single channelsyncPe…

汽修专用产品---选型介绍 汽修示波器 汽车示波器 汽车电子 汽修波形 汽车传感器波形 汽车检测

为了满足汽车电子用户的测量需求&#xff0c;我司特推出汽修专用版示波器&#xff0c;一键测量&#xff0c;轻松找出汽车问题。 LOTO各种型号的示波器其实都可以用作汽车传感器信号波形的检测。汽修应用中&#xff0c;工程师对示波器的性能要求对于LOTO产品来说不算高。 在我们…

《TCP/IP详解 卷一》第6章 DHCP

目录 6.1 引言 6.2 DHCP 6.2.1 地址池和租用 6.2.2 DHCP和BOOTP消息格式 6.2.3 DHCP和BOOTP选项 6.2.4 DHCP协议操作 6.2.5 DHCPv6 6.2.6 DCHP中继 6.2.7 DHCP认证 6.2.8 重新配置扩展 6.2.9 快速确认 6.2.10 位置信息&#xff08;LCI和LoST&#xff09; 6.2.11 移…

Unity Shader ASE基础效果思路与代码(二):边缘光、扰动火焰

Unity Shader ASE基础效果思路与代码(二)&#xff1a;边缘光、扰动火焰 这里写目录标题 Unity Shader ASE基础效果思路与代码(二)&#xff1a;边缘光、扰动火焰边缘光效果展示&#xff1a;代码与思路&#xff1a; 扰动火焰效果展示&#xff1a;代码与思路&#xff1a; 边缘光 …

snmp协议开通教程

目录 一、什么是snmp协议&#xff1f; 二、snmp协议可以用来干什么&#xff1f; 三、snmp协议的开通 1、snmpv2协议开通 2、snmpv3协议开通 一、什么是snmp协议&#xff1f; SNMP&#xff08;Simple Network Management Protocol&#xff09;是一种用于网络管理的标准协议&a…

STM32物联网(封装AT指令进行TCP连接及数据的接收和发送)

文章目录 前言一、AT指令函数封装1.向ESP8266发送数据函数2.设置ESP8266工作模式3.连接WIFI函数4.查询IP地址5.连接TCP服务器6.发送数据到TCP服务器7.接收并解析来自TCP服务器的数据8.关闭TCP服务器 二、代码测试总结 前言 本篇文章将继续带大家学习STM32物联网&#xff0c;那…

Vue 2.0 中的 Vuex Store 状态管理器核心概念和组成部分

Vue 2.0 中的 Vuex Store 状态管理器核心概念和组成部分 State&#xff08;状态&#xff09;&#xff1a; Vuex Store 的核心就是集中式存储应用的所有组件的状态。它是一个单一状态树&#xff0c;所有的组件都从这个状态树中读取数据并可以响应状态的变化。 const state {c…

Ubuntu20.04 查看系统版本号

目录 uname -auname -vlsb_release -acat /etc/issuecat /proc/version uname -a 查看系统发行版本号和操作系统版本 uname -v 查看版本号 lsb_release -a 查看发行版本信息 cat /etc/issue 查看系统版本 cat /proc/version 查看内核的版本号