为正常运行的Spring Boot应用添加Spring Security后图表加载失败排查

1. 放开图表接口的匿名访问权限 #

添加Spring Security后，所有请求默认会被拦截并重定向到登录页（返回302状态码），这是导致图表无法加载的核心原因。你需要在SecurityConfig里明确放开图表数据接口的匿名访问权限：

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests(auth -> auth
                // 替换为你RestBarController的实际接口路径
                .requestMatchers("/api/bar-chart/**").permitAll()
                // 其他接口按需配置权限
                .anyRequest().authenticated()
            )
            .formLogin(form -> form.permitAll())
            .logout(logout -> logout.permitAll());
        
        return http.build();
    }
}

2. 配置Spring Security支持跨域 #

Access-Control-Allow-Origin错误是因为Spring Security默认拦截OPTIONS预检请求，且未添加跨域响应头。可以通过两种方式解决：

方式一：自定义CORS配置 #

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            // 启用CORS并关联自定义配置
            .cors(cors -> cors.configurationSource(corsConfigurationSource()))
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/api/bar-chart/**").permitAll()
                .anyRequest().authenticated()
            )
            .formLogin(form -> form.permitAll())
            .logout(logout -> logout.permitAll());
        
        return http.build();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration config = new CorsConfiguration();
        // 替换为你的前端实际域名，比如http://localhost:8080
        config.setAllowedOrigins(Arrays.asList("http://localhost:8080"));
        config.setAllowedMethods(Arrays.asList("GET", "POST", "OPTIONS"));
        config.setAllowedHeaders(Arrays.asList("*"));
        // 若前端需要携带Cookie，开启此项
        config.setAllowCredentials(true);

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

方式二：使用全局CORS配置（已通过@CrossOrigin配置过的场景） #

如果你的Controller已经用@CrossOrigin标注，只需在SecurityConfig里启用默认CORS并禁用CSRF（前后端分离场景常用）：

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .cors(Customizer.withDefaults())
            .csrf(csrf -> csrf.disable())
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/api/bar-chart/**").permitAll()
                .anyRequest().authenticated()
            )
            .formLogin(form -> form.permitAll())
            .logout(logout -> logout.permitAll());
        
        return http.build();
    }
}

3. 验证效果 #

重启应用后，检查浏览器控制台：

• 302重定向提示消失
• 跨域相关错误不再出现
• ChartJS能正常拉取数据并渲染图表

内容的提问来源于stack exchange，提问作者geronimo