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

news2024/12/24 19:40:40

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

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

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

相关文章

【工具】阿莫智能设备之脱机烧录器K202C-1

注意&#xff0c;本文档仅仅是介绍烧录器的资料构成&#xff0c;并非烧录器的说明书&#xff0c;详细请看各对说明书及视频。 1. 资料图解 首先需要下载资料&#xff0c;通常稳定发布版本可以从 www.amomcu.cn 下载&#xff0c; 也可以向我们客服获取最新版本&#xff0c; 获…

多线程读写锁应用

实际场景 大多数情况下&#xff0c;线程只是读取共享变量的值&#xff0c;并不修改&#xff1b;只有少数情况下&#xff0c;线程才真正修改共享变量的值 "读" & "写" 场景下的临界区保护 多个线程同时读取一个共享变量时&#xff0c;并不存在冲突 (无…

基于PID控制器的直流电机位置控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 1. PID控制器原理 2. 位置控制环 5.完整工程文件 1.课题概述 基于PID控制器的直流电机位置控制系统。直流电机位置控制系统是工业自动化领域中的一个重要应用。为了实现精确的位置控制&#xff0c;常采…

第七篇【传奇开心果系列】python的文本和语音相互转换库技术点案例示例:Sphinx自动电话系统(IVR)经典案例

传奇开心果博文系列 系列博文目录python的文本和语音相互转换库技术点案例示例系列 博文目录前言一、雏形示例代码二、扩展思路介绍三、Sphinx多语言支持示例代码四、Sphinx和语音合成库集成示例代码五、Sphinx语音识别前自然语言预处理示例代码六、Sphinx语音识别自动电话系统…

ApexRBp在线粒子传感器在电动汽车电池制造的应用

电动汽车电池的崛起与颗粒污染的挑战 随着电动汽车&#xff08;EV&#xff09;市场的迅速扩张&#xff0c;对高性能锂离子电池的需求也急剧增加。这些电池不仅是EV的心脏&#xff0c;更是推动其前行的核心动力。然而&#xff0c;在电池制造的每一个环节&#xff0c;都需要对多…

Vite+Vue3+Ant Design3.2报错: Cannot read properties of null (reading ‘isCE‘)

最近的ViteVue3Ant Design Vue3.2开发的项目莫名其妙的报错&#xff1a; Uncaught (in promise) TypeError: Cannot read properties of null (reading isCE) 一直找不到原因出在哪&#xff0c;害的我费了好多时间调试 &#xff0c;百度上也找了各个解决方法&#xff0c;有说使…

electron学习和新建窗口

首先我们要先下载electron npm install --save-dev electron 建立入口文件main.js 新建一个入口文件 main.js&#xff0c;然后导入eletron新建一个窗口。 const { app, BrowserWindow, ipcMain } require("electron"); const path require("path");func…

MacBook的nginx出现13: Permission denied 的问题分析和解决办法

同样的项目代码&#xff0c;电脑从Windows更换到了MacBook&#xff0c;发现网站的样式都没有了&#xff0c;直接访问CSS文件 http://crm.ms-test.cc/toolstatic/css/bootstrap.min.css 发现无法访问。查看Nginx错误日志&#xff1a; 说明是nginx没有权限访问这个CSS文件&#…

HTTP 与 HTTPS-HTTP 解决了 HTTP 哪些问题?

资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) HTTP 解决了 HTTP 哪些问题? HTTP 由于是明文传输&#xff0c;所以安全上存在以下三个风险: 窃听风险&#xff0c;比如通信链路上可以获取通信内容&#xff0c;用户号容易没。篡改风险&#xff0c;比如…

防御保护---VPN

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.VPN概述 VPN的基本原理是在原有的公共网络之上&#xff0c;建立一个使用加密技术保护数据传输的私有网络。通过VPN&#xff0c;用户可以在不同的地点之间建立起安全的连接&#xff0c;实现远…

【Crypto | CTF】BUUCTF RSA2

天命&#xff1a;密码学越来越难了&#xff0c;看别人笔记都不知道写啥 天命&#xff1a;莫慌&#xff0c;虽然我不会推演法&#xff0c;但我可以用归纳法 虽然我不知道解题的推演&#xff0c;但我可以背公式啊哈哈哈 虽然我不会这题&#xff0c;但是我也能做出来 公式我不知…

笔试题讲解(C语言进阶)

目录 前言 1、题目 2、答案 3、解析 结语 前言 “纸上得来终觉浅&#xff0c;绝知此事要躬行”。本篇通过对指针实际案例的分析&#xff0c;由浅入深&#xff0c;来加强我们对指针的理解。 1、题目 这是一道难题&#xff0c;小心哦。 #include <stdio.h> int main(…

蓝桥杯C++竞赛常用库函数介绍

文章目录 前言一、二分查找1. 二分查找的前提2.binary_search函数3.lower_bound函数和upper_bound函数4.蓝桥杯例题 二、最值查找1. min和max函数2.min_element和max_element函数3.nth_element函数4.蓝桥杯例题 三、排序1.sort函数2.sort自定义比较函数,或lambda表达式(匿名函数…

企业计算机服务器中了crypt勒索病毒怎么办,crypt勒索病毒解密数据恢复

计算机服务器设备为企业的生产运营提供了极大便利&#xff0c;企业的重要核心数据大多都存储在计算机服务器中&#xff0c;保护企业计算机服务器免遭勒索病毒攻击&#xff0c;是一项艰巨的工作任务。但即便很多企业都做好的了安全运维工作&#xff0c;依旧免不了被勒索病毒攻击…

hexo+gitee免费打造个人网站导航

一、准备工作 本文在win10系统下进行环境搭建 1.可参考官方文档 hexo官方网站 Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown&#xff08;或其他标记语言&#xff09;解析文章&#xff0c;在几秒内&#xff0c;即可利用靓丽的主题生成静态网页 2.配置环境 这…

最新版opencv4.9安装介绍,基本图像处理详解

文章目录 一、什么是OpenCV &#xff1f;二. OpenCV 安装1. 下载地址2.安装命令&#xff1a;pip install opencv-python 三、图像基础1. 基本概念2. 坐标系3. 基本操作&#xff08;彩色图片&#xff09;&#xff08;1&#xff09;读取图片&#xff1a;cv2.imread( )&#xff08…

PCB共模辐射是如何产生的

目录 引言 模型分析01 模型分析02 模型分析03 模型分析04

记一次供应链的heapdump泄露到云接管

本文由掌控安全学院 -杳若 投稿 打点 开局一张图 分析 框架分析 首先发现使用的是前端的vue框架 注意/#/&#xff0c;存在的话基本都是vue&#xff0c;这时候就要从找接口开始 浅试登录 任意输入账号密码点击登录 发现校验了手机号的问题&#xff0c;这时候换个功能点 浅…

【OpenAI Sora】 如何使用:最新详细教程-新手小白必看

Sora 是什么&#xff1f; 2024年2月16日&#xff0c;OpenAI 在其官网上面正式宣布推出文本生成视频的大模型 Sora: https://openai.com/sora &#xff08;PS&#xff1a;目前 openai 官方还未开放 sora 灰度&#xff0c;不过根据文生图模型 DALLE 案例&#xff0c;一定是先给…

Spring Cloud部署篇1——Jar包部署至CentOS云服务器

一、项目介绍 系统模块 com.mingink |--mingink-api // 接口模块 | └──mingink-api-system // 系统接口 |--mingink-common // 通用模块 | └──mingink-common-core // 系统接口 |--mingink-gateway…