使用 Sa-Token 的全局过滤器解决跨域问题（三种方式全版）

最新推荐文章于 2025-04-16 09:40:24 发布
最新推荐文章于 2025-04-16 09:40:24 发布
阅读量3.7k 收藏 7
点赞数 2
分类专栏： sa-token专栏 文章标签： sa-token 跨域 springboot web开发 过滤器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shengzhang_/article/details/131343254
版权

在 web 开发中，跨域绝对是比较折磨新同学的一个问题，本文将讲解三种常见的跨域情形，并讲解如何使用 Sa-Token 框架解决跨域问题。

什么情况下会发生跨域

简单理解，就是你在 A 域名下的页面，去调用 B 域名的接口，浏览器感觉你这次调用可能是不安全的请求行为，于是它需要用 cors 安全策略来确认一下这个请求是由用户真实的意愿发出的，而不是被 csrf 伪造请求攻击偷偷发送的。（这么说只是为了方便大家理解，不是特别严谨，实际上同域名下部分情形也会出现跨域问题）

请仔细理解上面这段话，因为它说明了两点：

  • 跨域不是后端接口对前端浏览器的限制，而是前端浏览器对用户的限制。
  • 跨域不是在保护后端接口免受攻击，而是浏览器在保护用户，避免用户发送自己不想发送的请求。

请一定要记住上面跨域的本质，明白了症状和原因，我们才能对症下药。

一般情况下，我们会碰到三种跨域场景：

  • 1、本地页面调用测试服务器，只在项目开发阶段会有跨域问题。（比较简单）
  • 2、使用 header 头提交 token，产生的跨域问题。（比较常见+通用，推荐使用）
  • 3、使用第三方 Cookie 提交 token，产生的跨域问题。（最古老的方案，目前新版浏览器对此方案限制越来越严格，非必要不选择此方案，如果对此方案不是很熟悉就贸然使用也容易出现安全问题）

跨域情形一：只在项目开发阶段会有跨域问题

有些公司项目的开发方式为：

  • 在项目开发时：使用本地页面调用测试服务器接口。（域名不同，存在跨域问题）
  • 在项目部署时：将后端接口和前端页面部署在同一域名下。（域名一致，不存在跨域问题）

这种情况下比较好解决，在代码层面我们无需任何更改，只在前端客户端做出一定的更改就行了。比如说：在前端配置一个代理服务器，或者修改一下 Chrome 客户端使其去除跨域限制。

具体的方案有很多，大家可参考这篇博客：手把手教你解决web前端跨域问题

上面是说的普通前后端分离开发，而在APP、小程序 开发中，其天然就是个没有跨域限制的客户端，我们什么都不用做就能解决跨域问题。

跨域情形二：使用 header 头提交 token，产生的跨域问题（比较常见+通用，推荐使用）

当你使用 header 头提交 token 时，会产生跨域问题。此方案比较常见+通用，推荐使用。

jquery 代码示例：

	$.ajax({
		url: "/user/getInfo",
		type: "post", 
		data: {},
		dataType: 'json',
		headers: {
			"X-Requested-With": "XMLHttpRequest",
			// 重点处：请求的 header 头里塞入自定义参数
			"satoken": localStorage.getItem("satoken")
		},
		success: function(res){
			console.log(res);
		},
		error: function(xhr, type, errorThrown){
			return alert("异常：" + JSON.stringify(xhr));
		}
	});

Axios 代码示例：

    axios({
        url: "/user/getInfo",
        method: 'post',
        data: {},
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
			// 重点处：请求的 header 头里塞入自定义参数
            "satoken": localStorage.getItem("satoken")
        }
    }).
    then(function (response) { // 成功时执行
        const res = response.data;
		console.log(res);
    }).
    catch(function (error) {
        return alert("异常：" + JSON.stringify(error));
    })

此时在后端，我们应该添加以下响应头：

/**
 * [Sa-Token 权限认证] 配置类 
 *
 * @author click33
 */
@Configuration
public class SaTokenConfigure implements WebMvcConfigurer {

	/**
     * 注册 [Sa-Token 全局过滤器] 
     */
    @Bean
    public SaServletFilter getSaServletFilter() {
        return new SaServletFilter()
        		
        		// 指定 [拦截路由] 与 [放行路由]
        		.addInclude("/**").addExclude("/favicon.ico")
        		
        		// 认证函数: 每次请求执行 
        		.setAuth(obj -> {
					SaManager.getLog().debug("----- 请求path={}  提交token={}", SaHolder.getRequest().getRequestPath(), StpUtil.getTokenValue());
        			// ...
        		})
        		
        		// 异常处理函数：每次认证函数发生异常时执行此函数 
        		.setError(e -> {
        			return SaResult.error(e.getMessage());
        		})
        		
        		// 前置函数：在每次认证函数之前执行
        		.setBeforeAuth(obj -> {
					SaHolder.getResponse()

        			// ---------- 设置跨域响应头 ----------
        			// 允许指定域访问跨域资源
        			.setHeader("Access-Control-Allow-Origin", "*")
        			// 允许所有请求方式
        			.setHeader("Access-Control-Allow-Methods", "*")
        			// 允许的header参数
        			.setHeader("Access-Control-Allow-Headers", "*")
        			// 有效时间
        			.setHeader("Access-Control-Max-Age", "3600")
        			;
        			
        			// 如果是预检请求，则立即返回到前端 
        			SaRouter.match(SaHttpMethod.OPTIONS)
        				.free(r -> System.out.println("--------OPTIONS预检请求，不做处理"))
        				.back();
        		})
        		;
    }

}

如果你的项目是 WebFlux 环境，只需要把过滤器名称从 SaServletFilter 更换为 SaReactorFilter 即可，其它保持不变。

跨域情形三：使用第三方 Cookie 提交 token，产生的跨域问题。

这是最古老的方案，目前新版浏览器对此方案限制越来越严格，非必要不选择此方案，如果对此方案不是很熟悉就贸然使用也容易出现安全问题。

jquery 代码示例：

	$.ajax({
		url: "/user/getInfo",
		type: "post", 
		data: {},
		dataType: 'json',
		// 重点处：指定是跨域模式，需要提交第三方 Cookie 
		crossDomain: true,
		xhrFields:{
			withCredentials: true
		},
		headers: {
			"X-Requested-With": "XMLHttpRequest"
		},
		success: function(res){
			console.log(res);
		},
		error: function(xhr, type, errorThrown){
			return alert("异常：" + JSON.stringify(xhr));
		}
	});

Axios 代码示例：

    axios({
        url: "/user/getInfo",
        method: 'post',
        data: {},
		// 重点处：开启第三方 Cookie 
		withCredentials: true,
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        }
    }).
    then(function (response) { // 成功时执行
        console.log(res);
    }).
    catch(function (error) {
        return alert("异常：" + JSON.stringify(error));
    })

此时在后端，我们应该添加以下响应头：

/**
 * [Sa-Token 权限认证] 配置类 
 *
 * @author click33
 */
@Configuration
public class SaTokenConfigure implements WebMvcConfigurer {

	/**
     * 注册 [Sa-Token 全局过滤器] 
     */
    @Bean
    public SaServletFilter getSaServletFilter() {
        return new SaServletFilter()
        		
        		// 指定 [拦截路由] 与 [放行路由]
        		.addInclude("/**").addExclude("/favicon.ico")
        		
        		// 认证函数: 每次请求执行 
        		.setAuth(obj -> {
					SaManager.getLog().debug("----- 请求path={}  提交token={}", SaHolder.getRequest().getRequestPath(), StpUtil.getTokenValue());
        			// ...
        		})
        		
        		// 异常处理函数：每次认证函数发生异常时执行此函数 
        		.setError(e -> {
        			return SaResult.error(e.getMessage());
        		})
        		
        		// 前置函数：在每次认证函数之前执行
        		.setBeforeAuth(obj -> {

					// 获得客户端domain
					SaRequest request = SaHolder.getRequest();
					String origin = request.getHeader("Origin");
					if (origin == null) {
						origin = request.getHeader("Referer");
					}

        			// ---------- 设置跨域响应头 ----------
					SaHolder.getResponse()
					// 允许第三方 Cookie 
					.setHeader("Access-Control-Allow-Credentials", "true")
        			// 允许指定域访问跨域资源
        			.setHeader("Access-Control-Allow-Origin", origin)
        			// 允许所有请求方式
        			.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE")
					// 允许的header参数
					.setHeader("Access-Control-Allow-Headers", "x-requested-with,satoken")
        			// 有效时间
        			.setHeader("Access-Control-Max-Age", "3600")
					;
        			
        			// 如果是预检请求，则立即返回到前端 
        			SaRouter.match(SaHttpMethod.OPTIONS)
        				.free(r -> System.out.println("--------OPTIONS预检请求，不做处理"))
        				.back();
        		})
        		;
    }

}

如果你的项目是 WebFlux 环境，只需要把过滤器名称从 SaServletFilter 更换为 SaReactorFilter 即可，其它保持不变。

【项目实战】在Sa-Token中实现直接放行特定路径或资源（配置拦截器排除路径/使用过滤器放行特定请求/使用过滤器放行特定请求/静态资源放行/避免放行关键路径/动态白名单管理）
本本本添哥
05-13 43
在Sa-Token中实现特定路径或资源的直接放行，可以通过配置拦截器、过滤器以及静态资源路径来实现。具体步骤包括：1. 在拦截器中配置排除路径（白名单），如Swagger接口或静态资源；2. 使用过滤器放行跨域预检请求（OPTIONS方法）；3. 在Spring Boot中配置静态资源路径，并在Sa-Token中同步放行；4. 避免放行关键路径（如/error），以免影响全局异常处理；5. 对于动态管理的放行路径（如登录接口），可通过配置文件或数据库读取；6. 启动项目后验证配置效果，确保路径匹配规则正确。
详解比springSecurity和shiro更简单优雅的轻量级Sa-Token框架，比如登录认证,权限认证,单点登录,OAuth2.0,分布式Session会话,微服务网关鉴权
念兮为美
08-30 4820
详解比springSecurity和shiro更简单优雅的轻量级Sa-Token框架，比如登录认证,权限认证,单点登录,OAuth2.0,分布式Session会话,微服务网关鉴权。演示SpringBoot集成Sa-Token和Spring WebFlux集成Sa-Token这两个常用的开发框架。......
使用过滤器解决跨域问题
qq_39183887的博客
09-24 915
利用过滤器解决跨域问题 package com.etoak.book_self.commons.filter; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebFilter("/*") public class Filter0_CrossFilter imple
使用 Sa-Token CORS 策略处理跨域问题（三种方式全版）
shengzhang_的博客
04-11 712
在 web 开发中，跨域绝对是比较折磨新同学的一个问题，本文将讲解三种常见的跨域情形，并讲解如何使用 Sa-Token 框架解决跨域问题。
使用 Sa-Token 的全局过滤器解决跨域问题
热门推荐
shengzhang_的博客
08-26 1万+
在 SaTokenConfigure.java 中设置响应头即可 /** * [Sa-Token 权限认证] 配置类 */ @Configuration public class SaTokenConfigure { /** * 注册 [sa-token全局过滤器] */ @Bean public SaServletFilter getSaServletFilter() { return new SaServletFilter()
satoken,如何解决跨域
weixin_42575505的博客
01-02 929
跨域访问是指浏览器向跨域的服务器发出的网络请求。为了保护用户隐私，浏览器会限制跨域请求。 要解决跨域问题，可以使用以下方法之一： JSONP：使用 <script> 标签来加载跨域的资源，并通过回调函数来处理响应数据。 CORS(跨域资源共享)：服务器端设置响应头 Access-Control-Allow-Origin，允许浏览器发出跨域请求。 代理：使用服务器端的代码来转发请求...
利用过滤器解决跨域问题
无名小卒菜的博客
11-26 2502
1.什么是跨域？ 跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 注：同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。 2.这里我们演示一个demo，端口号不同引起的跨域问题，假设项目A ，ajax访问项目B的接口，但是两个项目的端口号不同，引起的跨域问题。 写一个简单的java web项目A，端口...
单点登录（基于Sa-Token-SSO）
weixin_51040479的博客
09-02 810
单点登录详解。
Sa-Token 一个轻量级 java 权限认证框架
最新发布
技术引领业务创新
04-16 8万+
Sa-Token是一个轻量级Java权限认证框架，主要解决：登录认证、权限认证、Session会话、单点登录、OAuth2.0、微服务网关鉴权 等一系列权限相关问题
Sa-Token SSO 前后端分离 SpringBoot + Vue2
weixin_45850829的博客
07-01 5527
单点登录(SingleSignOn，SSO)，就是通过用户的一次性鉴别登录。当用户在身份认证服务器上登录一次以后，即可获得访问单点登录系统中其他关联系统和应用软件的权限，同时这种实现是不需要管理员对用户的登录状态或其他信息进行修改的，这意味着在多个应用系统中，用户只需一次登录就可以访问所有相互信任的应用系统。这种方式减少了由登录产生的时间消耗，辅助了用户管理，是比较流行的。单点登录——便是我们搭建统一认证中心的关键。
Spring-Cloud-Gateway 整合 Sa-Token 全局过滤器之路由匹配
m0_51810668的博客
06-01 2518
Sa-Token 全局过滤器的接口匹配应当模块化，粒度要合适，不应过于集中，也不宜过于零散。
过滤器解决跨域问题
Code The Future
01-28 2726
什么是跨域？ 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略(所谓同源是指，域名，协议，端口均相同)造成的，是浏览器对JavaScript施加的安全限制。 请求地址 形式 结果 study.cn/json/jsonp/jsonp.html http://study.cn/test/a.html 同一域名,不同文件夹 成功 http://study.cn...
过滤器（Filter）解决跨域问题
wender的专栏
03-23 2938
最近在做一个项目，前端资源与服务端单独部署。遇到一个跨域问题，常见的跨域问题可以通过jsonp方式解决。下面介绍另一种解决方式： 服务端环境：spring + dubbo + tomcat 第一步：在WEB-INF目录下添加一个crossdomain.xml文件，内容如下： <cross-domain-policy> <allow-access-from domain=...
Java过滤器解决跨域问题
码出精彩
05-30 2804
Java后端解决跨域问题 代码： import javax.servlet.*; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class CORSFilter implements Filter{ @Override public void destroy() { } @Override public void doFilter(Servle
过滤器和拦截器处理跨域问题
weixin_73186358的博客
06-15 368
【代码】过滤器和拦截器处理跨域问题。
SpringBoot2.0 整合 JWT 框架，解决Token跨域验证问题
【积累】，是一个长期持续的过程。
07-11 2553
JWT(全称JSONWebToken)，在基于HTTP通信过程中，进行身份认证。
过滤器实现跨域问题
heyeweiwan的专栏
10-31 1068
public class CorsFilter implements Filter{ @Override public void init(FilterConfig filterConfig) throws ServletException { // TODO Auto-generated method stub } @Override public void doFilt
SaToken 全局登录校验和过滤
hsw
05-14 408
【代码】SaToken 全局登录校验和过滤。
sa-token配置corsconfig
01-01
### sa-token 中 CORS 设置 为了在 sa-token 中配置跨域资源共享（CORS），可以采用多种方式来满足不同应用场景的需求。通常情况下，在 Spring Boot 应用中集成 sa-token 时，可以通过全局过滤器或特定端点的方式来进行 CORS 配置。 #### 方法一：通过 WebMvcConfigurer 实现全局 CORS 支持 如果希望为整个应用程序提供统一的 CORS 策略，则可以在 `@Configuration` 类中实现 `WebMvcConfigurer` 接口并重写相应方法： ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 对所有路径生效 .allowedOrigins("*") // 允许来自任何源的请求 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .maxAge(3600); } } ``` 这种方法适用于大多数情况下的简单跨域需求[^2]。 #### 方法二：针对单个控制器或接口单独设置 CORS 属性 对于某些特殊场景下仅需对部分 API 开启 CORS 功能的情况，可以直接在 Controller 或者具体 Handler 上添加 `@CrossOrigin` 注解： ```java @RestController @RequestMapping("/api/v1") @CrossOrigin(origins = {"http://example.com"}, maxAge = 3600, methods={RequestMethod.GET}) public class MyController { @GetMapping("/data") public ResponseEntity<String> getData() { return new ResponseEntity<>("Data from server.", HttpStatus.OK); } } ``` 此法灵活性较高，适合细粒度控制各个资源之间的访问策略。 #### 方法三：利用 Sa-Token 自带功能处理预检请求 当涉及到更复杂的业务逻辑时，比如动态调整允许的 Origins 列表或是根据用户角色决定是否放行等操作，sa-token 提供了一种优雅的方式来拦截 OPTIONS 请求，并在此基础上做进一步判断： ```java import cn.dev33.satoken.interceptor.SaInterceptor; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.InterceptorRegistration; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; @Configuration public class SaTokenConfigure { private final List<String> allowedOrigins = Arrays.asList( "http://localhost:8080", "https://yourdomain.com" ); /** * Register the interceptor to handle preflight requests. */ public void registerInterceptors(InterceptorRegistry registry){ InterceptorRegistration ir = registry.addInterceptor(new SaInterceptor()); // Customize your rules here... ir.addPathPatterns("/**"); ir.excludePathPatterns("/login"); // Handle Preflight Requests ir.addPathPatterns("/").addHandlerMethod(this::handlePreflightRequest); } private boolean handlePreflightRequest(HttpServletRequest request, HttpServletResponse response) throws IOException{ if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { String originHeader = request.getHeader("Origin"); if (originHeader != null && allowedOrigins.contains(originHeader)) { response.setHeader("Access-Control-Allow-Origin", originHeader); response.setHeader("Access-Control-Allow-Methods", "*"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type"); response.setStatus(HttpServletResponse.SC_OK); return true; } else { response.sendError(HttpServletResponse.SC_FORBIDDEN, "Invalid Origin Header."); return false; } } return false; } } ``` 上述代码片段展示了如何借助 sa-token 的拦截机制捕获所有的 HTTP 请求，并特别关注于 OPTIONS 类型的预检请求。这样做的好处是可以集中管理跨域规则而不必修改原有业务逻辑[^1]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值