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.hqwc.cn/news/492164.html

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

相关文章

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

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

【小沐学C++】C/C++包管理工具Conan使用(C++、Python、CMake、Conan)

文章目录 1、简介2、Conan下载安装3、Conan命令3.1 查看conan版本3.2 更新conan库3.3 搜索软件包3.4 显示conan所有源3.5 查看软件包3.6 通过conanfile.txt安装依赖包 结语 1、简介 Conan是C和C语言的依赖项和包管理器。它是免费和开源的&#xff0c;适用于所有平台&#xff0…

JSP实现数据传递与保存(二)

一、session对象 session机制是一种服务器端的机制&#xff0c;在服务器端保存信息用于存储与用户相关的会话信息 1.1 session与窗口的关系 每个session对象都与一个浏览器窗口对应&#xff0c;重新开启一个浏览器窗口&#xff0c;可以重新创建一个session对象&#xff08;不…

09 Redis之分布式系统(数据分区算法 + 系统搭建与集群操作)

6 分布式系统 Redis 分布式系统&#xff0c;官方称为 Redis Cluster&#xff0c;Redis 集群&#xff0c;其是 Redis 3.0 开始推出的分布式解决方案。其可以很好地解决不同 Redis 节点存放不同数据&#xff0c;并将用户请求方便地路由到不同 Redis 的问题。 什么是分布式系统?…

49.仿简道云公式函数实战-文本函数-Ip

1. Ip函数 获取当前用户的ip地址 注意是Ipv4的地址 2. 函数用法 IP() 3. 函数示例 获取当前用户的ip地址IP() 4. 代码实战 首先我们在function包下创建text包&#xff0c;在text包下创建IpFunction类&#xff0c;代码如下&#xff1a; package com.ql.util.express.sel…

MySQL-约束,子查询,常用函数

1.SQL 1.1 SQL 介绍 SQl&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是一种用于管理关系型数据库系统的标准化语言。它是一种专门用于执行各种操作的语言&#xff0c;包括查询数据、插入、更新、删除数据以及定义和管理数据库模式&#xff0…

TABR: TABULAR DEEP LEARNING MEETS NEAREST NEIGHBORS IN 2023 阅读笔记

TABR: TABULAR DEEP LEARNING MEETS NEAREST NEIGHBORS IN 2023 论文地址&#xff1a;https://arxiv.org/abs/2307.14338 源代码&#xff1a;https://github.com/yandex-research/tabular-dl-tabr 摘要 针对表格数据问题&#xff08;例如分类、回归&#xff09;的深度学习&a…

《高质量的C/C++编程规范》学习

目录 一、编程规范基础知识 1、头文件 2、程序的板式风格 3、命名规则 二、表达式和基本语句 1、运算符的优先级 2、复合表达式 3、if语句 4、循环语句的效率 5、for循环语句 6、switch语句 三、常量 1、#define和const比较 2、常量定义规则 四、函数设计 1、参…

备战蓝桥杯---基础算法刷题2

题目有一点水&#xff0c;不过还是有几个好题的&#xff0c;我在这分享一下&#xff1a; 很容易想到先往最高处跳再往最低处跳&#xff0c;依次类推&#xff0c;那怎么保证其正确性呢&#xff1f; 证法1. 在此&#xff0c;我们从0开始&#xff0c;假设可以跳到a,b,c(a<b<…

【开源项目】超经典实景三维数字孪生城市CIM/BIM公共安全案例

飞渡科技数字孪生城市安全监管平台&#xff0c;基于数字孪生、云计算、遥感技术、数字成像等高度智能化技术&#xff0c;整合城市安全概况、安全生产和联动指挥三大模块。平台全面监测城市安全数据&#xff0c;迅速响应紧急事件&#xff0c;以“数智化”构建城市新安全格局。 通…

2024年2月16日优雅草蜻蜓API大数据服务中心v1.1.1大更新-UI全新大改版采用最新设计ui·增加心率计算器·退休储蓄计算·贷款还款计算器等数接口

2024年2月16日优雅草蜻蜓API大数据服务中心v1.1.1大更新-UI全新大改版采用最新设计ui增加心率计算器退休储蓄计算贷款还款计算器等数接口 更新日志 前言&#xff1a;本次更新中途跨越了很多个版本&#xff0c;其次本次ui大改版-同步实时发布教程《带9.7k预算的实战项目layuiph…

力扣--动态规划1027.最长等差数列

思路分析&#xff1a; 使用动态规划的思想&#xff0c;定义二维数组dp&#xff0c;其中dp[i][j]表示以nums[i]为结尾&#xff0c;公差为(j-1000)的等差数列长度。为了适应负数的情况&#xff0c;将公差的范围设为[-1000, 1000]&#xff0c;并且加上1000作为数组索引。 初始化r…