XXL-SSO跨域资源共享(CORS)配置：前后端分离架构实践

XXL-SSO跨域资源共享(CORS)配置：前后端分离架构实践

XXL-SSO是一款分布式单点登录框架，专为解决前后端分离架构中的跨域资源共享（CORS）问题而设计。本文将详细介绍如何在实际项目中配置XXL-SSO实现跨域登录态共享，帮助开发者快速掌握这一关键技术。

跨域登录挑战与XXL-SSO解决方案

在前后端分离架构中，前端应用与后端服务通常部署在不同域名下，这就不可避免地面临跨域资源共享的挑战。特别是在单点登录场景下，如何在多个应用间安全地共享登录状态，成为开发者必须解决的核心问题。

XXL-SSO通过创新的跨域登录态共享机制，完美解决了这一难题。其核心原理是利用Cookie在不同域名间传递登录令牌，并通过服务端的LoginStore组件统一管理登录状态。这种设计既保证了安全性，又实现了无缝的用户体验。

XXL-SSO跨域登录核心实现

XXL-SSO的跨域登录功能主要通过XxlSsoCasFilter过滤器实现。该过滤器位于xxl-sso-core/src/main/java/com/xxl/sso/core/auth/filter/XxlSsoCasFilter.java，负责处理跨域登录请求和登录状态验证。

登录流程解析

1. 当用户访问未登录的客户端应用时，过滤器会拦截请求并跳转到SSO服务器的登录页面。
2. 用户在SSO服务器完成登录后，系统会生成一个登录令牌（token）并存储在SSO服务器的Cookie中。
3. SSO服务器将用户重定向回原客户端应用，并在URL中携带临时票据（ticket）。
4. 客户端应用通过票据向SSO服务器验证身份，验证通过后，客户端应用会在自己的域名下设置登录Cookie。

注销流程解析

注销流程则是登录流程的逆过程。用户在任一客户端应用发起注销请求后，SSO服务器会清除所有相关域名下的登录Cookie，并通知其他客户端应用同步注销状态。

快速配置：XXL-SSO跨域支持

要在项目中启用XXL-SSO的跨域支持，只需简单几步配置：

1. 添加依赖

确保在项目的pom.xml中添加了XXL-SSO的核心依赖：

<dependency> <groupId>com.xuxueli</groupId> <artifactId>xxl-sso-core</artifactId> <version>1.2.0-SNAPSHOT</version> </dependency>

2. 配置SSO过滤器

在Spring Boot应用中，可以通过Java配置类注册XxlSsoCasFilter：

@Configuration public class XxlSsoConfig { @Bean public FilterRegistrationBean<XxlSsoCasFilter> xxlSsoFilterRegistration() { FilterRegistrationBean<XxlSsoCasFilter> registration = new FilterRegistrationBean<>(); registration.setName("XxlSsoCasFilter"); registration.setFilter(new XxlSsoCasFilter( "http://sso-server.com", // SSO服务器地址 "/login", // 登录路径 "/exclude/*" // 排除路径 )); registration.addUrlPatterns("/*"); return registration; } }

3. 配置跨域资源共享

虽然XXL-SSO本身已经处理了跨域登录的核心逻辑，但在前后端分离架构中，还需要确保后端API支持CORS。可以通过添加CORS过滤器来实现：

@Configuration public class CorsConfig { @Bean public FilterRegistrationBean<CorsFilter> corsFilterRegistration() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOriginPattern("*"); config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); FilterRegistrationBean<CorsFilter> registration = new FilterRegistrationBean<>(); registration.setFilter(new CorsFilter(source)); registration.addUrlPatterns("/*"); registration.setName("corsFilter"); registration.setOrder(Ordered.HIGHEST_PRECEDENCE); return registration; } }

多应用共享登录状态实践

XXL-SSO的强大之处在于能够在多个不同域名的应用间共享登录状态。下面通过一个实际场景来展示如何配置多个应用实现单点登录。

假设我们有两个应用：

• 应用1：http://app1.com
• 应用2：http://app2.com
• SSO服务器：http://sso-server.com

配置应用1

在应用1的配置文件中添加：

xxl.sso.server=http://sso-server.com xxl.sso.login.path=/login xxl.sso.excluded.paths=/exclude/*

配置应用2

在应用2的配置文件中添加相同的配置：

xxl.sso.server=http://sso-server.com xxl.sso.login.path=/login xxl.sso.excluded.paths=/exclude/*

验证跨域登录

1. 用户访问应用1，被重定向到SSO服务器登录
2. 登录成功后，用户可以访问应用1的受保护资源
3. 打开新的浏览器标签页，访问应用2
4. 应用2会自动识别用户已登录，无需再次验证

常见问题与解决方案

跨域Cookie无法读取

如果遇到跨域Cookie无法读取的问题，需要检查以下几点：

1. 确保SSO服务器和客户端应用的Cookie都设置了SameSite=None属性
2. 确保Cookie设置了Secure属性（仅在HTTPS环境下）
3. 检查浏览器是否启用了第三方Cookie阻止功能

登录状态同步延迟

如果多个应用间登录状态同步出现延迟，可以考虑：

1. 使用Redis作为LoginStore的实现，确保分布式环境下的状态一致性
2. 调整Cookie的过期时间，避免频繁的重新验证

总结

XXL-SSO提供了一套完整的跨域资源共享解决方案，特别适合前后端分离架构。通过本文介绍的配置方法，开发者可以快速实现安全、高效的单点登录功能。无论是小型项目还是大型企业应用，XXL-SSO都能满足需求，帮助开发者专注于业务逻辑而不是身份验证细节。

如需了解更多细节，可以参考项目的官方文档：doc/XXL-SSO官方文档.md。如果需要查看核心实现，可以参考xxl-sso-core/src/main/java/com/xxl/sso/core/auth/filter/XxlSsoCasFilter.java文件。

希望本文能帮助你更好地理解和使用XXL-SSO的跨域功能，为你的项目带来更安全、更便捷的用户体验！ 🚀