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:8002

cors.origins[0]= http://localhost:9527/
spring.main.allow-bean-definition-overriding=true

3) 重写cas重定向策略

@Configuration
@EnableCasClient
public class CasConfig implements CasClientConfigurer, ConfigurationKeys {

    @Override
    public 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 {

    @Override
    public 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;
    }

    @Bean
    public 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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

css实现悬浮卡片

结果展示 html代码 <!doctype html> <html lang"zh"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge,chrome1"> <meta name"viewport" content"…

MATLAB中的稀疏矩阵和密集矩阵

在MATLAB中&#xff0c;矩阵可以表示为密集或稀疏格式。通常&#xff0c;矩阵默认以密集格式存储&#xff0c;这意味着每个元素都明确地存储在内存中&#xff0c;无论它的值是多少。然而&#xff0c;当矩阵含有大量的零元素时&#xff0c;这种存储方式就会变得非常低效。为了更…

【深度学习目标检测】十八、基于深度学习的人脸检测系统-含GUI和源码(python,yolov8)

人脸检测是计算机视觉中的一个重要方向&#xff0c;也是一个和人们生活息息相关的研究方向&#xff0c;因为人脸是人最重要的外貌特征。人脸检测技术的重要性主要体现在以下几个方面&#xff1a; 人脸识别与安全&#xff1a;人脸检测是人脸识别系统的一个关键部分&#xff0c;是…

【QT QML】软件打包,生成安装包

一、版本 Desktop 5.15.2 MinGW 64-bit二、打包 1. 编译Release版本 2. 在工程目录下找到Realse文件夹 3. 拷贝文件 ***-Desktop_Qt_5_15_2_MinGW_64_bit-Release - release - xxx.exe到一个新文件夹中 4. 开启相应打包工具&#xff08;根据自己的编译器和版本选择&#xff0…

PPT大珩助手使用方法的详细介绍

软件介绍 PPT大珩助手是一款全新设计的Office PPT插件&#xff0c;它是一款功能强大且实用的PPT辅助工具&#xff0c;支持Wps Word和Office Word&#xff0c;能够轻松帮助您修改、优化和管理幻灯片。凭借丰富的功能和用户友好的界面&#xff0c;PPT大珩助手能够助力您打造出精…

【力扣hot100】刷题笔记Day11

前言 科研不顺啊......又不想搞了&#xff0c;随便弄弄吧&#xff0c;多花点时间刷题&#xff0c;今天开启二叉树&#xff01; 94. 二叉树的中序遍历 - 力扣&#xff08;LeetCode&#xff09; 递归 # 最简单递归 class Solution:def inorderTraversal(self, root: TreeNode) …

ChatGPT/GPT4科研应用与AI绘图及论文写作

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

第十一天-Excel的操作

目录 1.xlrd-Excel的读模块 安装 使用 获取工作簿 读取工作簿的内容 xlsxwriter-Excel的写模块 安装 使用 生成图表 add_series参数 图表的样式 demo&#xff1a;生成图表 Excel的操作在python中有多个模块&#xff0c;为了能够快速使用&#xff0c;选择了相对简单…

MATLAB使用绘图plot制作动态GIF

文章目录 1 前言2 DemoDemo 1 - 不使用函数Demo 2 - 使用函数 1 前言 在PPT展示或者博客创作中&#xff0c;有时需要插入动态图如GIF&#xff0c;来演示算法效果或者结果。在MATLAB中&#xff0c;可以通过一些代码&#xff0c;将绘图plot转化为动态的GIF。 其大致方法为&…

C++中的STL数据结构

内容来自&#xff1a;代码随想录&#xff1a;哈希表理论基础 1.常见的三种哈希结构 当我们想使用哈希法来解决问题的时候&#xff0c;我们一般会选择如下三种数据结构 数组 set &#xff08;集合&#xff09; map(映射) 在C中&#xff0c;set 和 map 分别提供以下三种数据结构…

vue3的diff

以vue3的patch为例 首先判断两个节点是否为相同同类节点&#xff0c;不同则删除重新创建如果双方都是文本则更新文本内容如果双方都是元素节点则递归更新子元素&#xff0c;同时更新元素属性更新子节点时又分了几种情况 新的子节点是文本&#xff0c;老的子节点是数组则清空&a…

07 STL 简介

目录 什么是STLSTL的版本STL的六大组件STL的重要性如何学习STLSTL的缺陷 1. 什么是STL c标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构和算法的软件框架 2. STL的版本 原始版本 Alexander Stepanov、Meng Lee在惠普实验室的…

详解AP3216C(三合一sensor: 光照、距离、照射强度)驱动开发

目录 概述 1 认识AP3216C 1.1 AP3216C特性 1.2 AP3216C内部结构 1.3 AP3216C 硬件电路 1.4 AP3216C工作时序 1.4.1 I2C 写数据协议 1.4.2 I2C 读数据协议 1.5 重要的寄存器 1.5.1 系统配置寄存器 1.5.2 和中断相关寄存器 1.5.3 IR数据寄存器 1.5.4 ALS 数据寄存器 …

Android 开发一个耳返程序(录音,实时播放)

本文目录 点击直达 Android 开发一个耳返程序程序编写1. 配置 AndroidManifast.xml2.编写耳返管理器3. 录音权限申请4. 使用注意 最后我还有一句话要说怕相思&#xff0c;已相思&#xff0c;轮到相思没处辞&#xff0c;眉间露一丝 Android 开发一个耳返程序 耳返程序是声音录入…

计算机网络实验八 利用 Java /C++开发网络聊天应用程序

一、实验目的和要求 1)基本掌握利用 Java 开发环境调试应用程序的方法。 2)理解基于套接字开发网络应用程序的过程,深入理解客户/服务器方式工作原理。 3)掌握基于Java和C++开发网络通信程序的方法。 二、实验环境 1)运行 Windows 2008 Server/XP/7 操作系统的 PC 2 台…

应急响应实战笔记03权限维持篇(3)

0x00 前言 攻击者在获取服务器权限后&#xff0c;会通过一些技巧来隐藏自己的踪迹和后门文件&#xff0c;本文介绍Linux下的几种隐藏技术。 0x01 隐藏文件 Linux 下创建一个隐藏文件&#xff1a;touch .test.txt touch 命令可以创建一个文件&#xff0c;文件名前面加一个 点…

一文读懂:AWS 网络对等互连(VPC peering)实用操作指南

VPC peering connection-网络对等互连在您的 Atlas VPC 和云提供商的 VPC 之间建立私有连接。该连接将流量与公共网络隔离以提高安全性。本篇文章有VPC peering的操作指南以及价格等信息。如还有疑问请联系我们MongoDB的销售&#xff0c;客户成功经理或解决方案架构师。 1 使用…

开源大语言模型作为 LangChain 智能体

概要 开源大型语言模型 (LLMs) 现已达到一种性能水平&#xff0c;使它们适合作为推动智能体工作流的推理引擎: Mixtral 甚至在我们的基准测试中 超过了 GPT-3.5&#xff0c;并且通过微调&#xff0c;其性能可以轻易的得到进一步增强。 引言 针对 因果语言建模 训练的大型语言模…

用买糖果的方式来理解正交匹配追踪(OMP)算法

在信号处理领域&#xff0c;压缩感知&#xff08;Compressed Sensing&#xff09;是一种能够从远少于传统奈奎斯特采样定理所要求的样本数目中重建稀疏信号的技术。压缩感知的理论基础在于一个前提假设&#xff0c;即许多自然信号都含有稀疏的表示&#xff0c;换句话说&#xf…

【Python】OpenCV-图像轮廓检测初学

图像轮廓检测初学 在图像处理领域中&#xff0c;轮廓检测是一项重要的任务&#xff0c;用于寻找并标定图像中的物体边缘。本文将介绍如何使用OpenCV库进行图像轮廓检测&#xff0c;并展示一个简单的示例代码。代码中的注释将详细解释每一步的操作。 1. 引言 图像轮廓检测是图…