sa-token跨域请求如何正确配置CORS？

Question

在使用 Sa-Token 进行跨域请求时，如何正确配置 CORS 以确保 Token 正常传递并避免跨域拦截？常见问题包括：响应头中未正确设置 `Access-Control-Allow-Origin`、未允许 `Authorization` 请求头、未处理预检请求（OPTIONS），以及未开启凭证携带（如 `withCredentials`）导致 Token 无法正确发送或接收。如何在 Spring Boot 中结合 Sa-Token 与 CORS 配置解决这些问题？

Answer 1

一、Sa-Token 跨域请求中 CORS 配置详解

Sa-Token 是一个轻量级的 Java 权限认证框架，广泛用于 Spring Boot 项目中进行登录鉴权和 Token 管理。在前后端分离架构下，跨域（CORS）问题尤为常见。本文将从基础概念到实战配置，逐步讲解如何在使用 Sa-Token 的过程中正确配置 CORS，确保 Token 正常传递。

1. 跨域请求与 CORS 基础知识

CORS（Cross-Origin Resource Sharing）是一种机制，允许浏览器向不同源（协议、域名、端口）发起请求。默认情况下，浏览器会阻止跨域请求以防止安全风险。

常见的跨域场景包括：

• 前端运行在 http://localhost:8080，后端 API 在 http://api.example.com
• 前后端部署在不同的子域名下
• 使用 HTTPS 和 HTTP 混合访问

2. 使用 Sa-Token 时常见的跨域问题

当使用 Sa-Token 进行 Token 认证时，跨域请求可能遇到以下典型问题：

问题描述	影响	解决方案关键词
未设置 Access-Control-Allow-Origin	请求被浏览器拦截	Access-Control-Allow-Origin, allowedOrigins
未允许 Authorization 请求头	Token 无法传递	Access-Control-Allow-Headers, Authorization
未处理 OPTIONS 预检请求	复杂请求失败	@CrossOrigin, WebMvcConfigurer
未开启 withCredentials 支持	Cookie/Session 无法共享	allowCredentials, withCredentials

3. Spring Boot 中全局 CORS 配置示例

建议通过实现 WebMvcConfigurer 接口进行全局配置，避免重复注解。

@Configuration
@EnableWebMvc
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("http://localhost:8080") // 允许的来源
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的方法
            .allowedHeaders("Content-Type", "Authorization") // 允许的请求头
            .exposedHeaders("Authorization") // 暴露给前端的响应头
            .allowCredentials(true); // 是否允许携带凭证
    }
}
    

4. Sa-Token 相关配置注意事项

Sa-Token 默认使用 Cookie 或 Header 中的 Token 进行身份验证。在跨域环境下，需要注意以下几点：

• 若使用 Cookie 存储 Token，则必须启用 withCredentials 并设置 allowCredentials(true)
• 若使用 Header 传递 Token（如 Authorization: Bearer token），需确保 allowedHeaders 包含 Authorization
• 对于 OPTIONS 预检请求，Spring Boot 默认已处理，但某些自定义过滤器或中间件可能会影响其处理流程

5. 客户端请求配置（JavaScript / Axios）

在客户端发送请求时，也需注意相关配置：

// 使用 axios 示例
axios.get('/api/user', {
    headers: {
        'Authorization': 'Bearer your_token_here'
    },
    withCredentials: true
});
    

6. 完整流程图说明

graph TD
            A[前端请求] -->|跨域| B(后端服务)
            B --> C{是否为预检请求 OPTIONS?}
            C -->|是| D[返回 CORS 响应头]
            C -->|否| E[检查 Origin 是否允许]
            E -->|不允许| F[拒绝请求]
            E -->|允许| G[继续处理业务逻辑]
            G --> H[Sa-Token 验证 Token]
            H --> I{Token 是否有效?}
            I -->|是| J[返回数据]
            I -->|否| K[返回 401 未授权]

7. 常见错误排查技巧

• 查看浏览器控制台输出，确认是否报错 No 'Access-Control-Allow-Origin' header present
• 使用 Postman 或 curl 测试接口，排除前端代码干扰
• 在后端日志中打印请求头信息，确认 Token 是否正常接收
• 确保 Sa-Token 的拦截器配置未对 OPTIONS 请求做权限校验