在 Ruoyi 项目中如何解决跨域问题（CORS）

在前后端分离的项目开发中，跨域请求是不可避免的问题，尤其是使用 Vue/React 前端 + Spring Boot 后端 的场景。如果不处理跨域请求，浏览器会报类似如下错误：

Access to XMLHttpRequest at 'http://localhost:8080/api/user' from origin 'http://localhost:3000' has been blocked by CORS policy

在 Ruoyi 项目中，官方推荐的做法是通过 Spring Security + CorsFilter 来解决跨域问题。下面我结合实际代码，给大家详细讲解。

---

1️⃣ 原理简介

CORS（Cross-Origin Resource Sharing） 是浏览器的一种机制，用于允许或拒绝跨域请求。跨域请求是指：

• 前端页面地址（协议+域名+端口）与后端接口地址不一致；

• 浏览器默认同源策略会阻止这种请求。

解决跨域问题的思路有两种：

1. 全局配置 CORS（通过 WebMvcConfigurer 或 CorsFilter）

2. Spring Security 集成 CORS（Ruoyi 的做法）

---

2️⃣ Ruoyi 中的跨域实现

在 Ruoyi 项目中，跨域是通过 CorsFilter 配合 Spring Security 过滤器链 来解决的。

下面是核心代码示例（摘自 SecurityConfig）：

@Autowired
private CorsFilter corsFilter;

@Bean
protected SecurityFilterChain filterChain(HttpSecurity httpSecurity) throws Exception
{
    return httpSecurity
        // 禁用 CSRF，因为使用的是 token
        .csrf(csrf -> csrf.disable())
        // 允许静态资源访问
        .authorizeHttpRequests((requests) -> {
            requests.antMatchers("/login", "/register", "/captchaImage").permitAll()
                    .anyRequest().authenticated();
        })
        // 添加 JWT Filter
        .addFilterBefore(authenticationTokenFilter, UsernamePasswordAuthenticationFilter.class)
        // 添加 CORS Filter
        .addFilterBefore(corsFilter, JwtAuthenticationTokenFilter.class)
        .addFilterBefore(corsFilter, LogoutFilter.class)
        .build();
}

关键点解析：

1. CorsFilter 被 加入到 Spring Security 过滤器链 中：

   • addFilterBefore(corsFilter, JwtAuthenticationTokenFilter.class)
     确保跨域处理在 JWT 认证前执行。

   • addFilterBefore(corsFilter, LogoutFilter.class)
     确保登出操作也可以跨域调用。

2. @Bean 注入 CorsFilter：

   • Ruoyi 默认会创建一个 CorsFilter Bean，用于处理 OPTIONS 请求（浏览器预检请求）。

   • 可以通过 CorsConfigurationSource 配置允许的域名、请求方法、请求头等。

3. 配合 JWT 认证：

   • 前端请求带 token 时，先经过 CorsFilter 处理跨域；

   • 然后再由 JwtAuthenticationTokenFilter 校验 token；

   • 保证跨域和安全验证同时生效。

---

3️⃣ 常用 CORS 配置示例

如果你想自定义允许跨域的域名，可以像下面这样配置 CorsFilter：

@Bean
public CorsFilter corsFilter() {
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true); // 是否允许发送 Cookie
    config.addAllowedOriginPattern("*"); // 允许的域名，* 表示所有
    config.addAllowedHeader("*"); // 允许的请求头
    config.addAllowedMethod("*"); // 允许的方法 GET/POST/PUT/DELETE

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}

这样配置后，前端无论从哪个域名访问后端接口，都不会再出现跨域问题。

---

4️⃣ 总结

在 Ruoyi 项目中解决跨域问题的核心思路：

1. 通过 CorsFilter 全局处理跨域请求；

2. 在 Spring Security 过滤器链中注册 CorsFilter，确保跨域请求在认证前处理；

3. 可自定义 CORS 配置，控制允许的域名、请求头和方法。

小结：跨域问题本质上是浏览器安全策略的问题，不处理会导致前端无法请求接口；在 Ruoyi 中，通过 CorsFilter 和 Spring Security 配合，既保证安全，又解决了跨域问题。

---

💡 Tips：

• 如果前端和后端在同一域名和端口下开发（例如通过 Nginx 反向代理），可以不配置跨域。

• 开发环境推荐允许所有域名（*），上线时要严格限制来源域名。