使用 OKTA - 升级到 Spring Boot 3 后出现 CORS 错误 - CORS 标头“Access-Control-Allow-Origin”丢失

Question

我有一个应用程序，前端使用 Vue.js，后端使用 Spring Boot。我们使用 OKTA 来确保安全。这与 Java 11 和 Spring Boot 2.1.8 配合得很好。

Spring Boot REST 服务是 http://localhost:7801，UI 的 NGINX 服务器是 http://localhost:7800。

最近，我尝试升级后端以使用 Spring Boot 3.1.3 和 Java 17。当 UI 访问端点时，出现以下错误：

跨源请求被阻止：同源策略不允许读取 http://localhost:7801/oauth2/authorization/okta 处的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”丢失）。状态代码：403。

更新 Spring Boot 后，Spring Security 需要进行一些更改。否则后端代码是相同的。我确实在 OKTA 中将 http://localhost:7800 和 http://localhost:7800/ 配置为可信来源。

研究后我仍然不确定如何进行这项工作。我很感激任何想法。

Spring Boot 2.1.8

@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class OAuthSecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .cors()
            .and().csrf().disable()
            .authorizeRequests()
            .antMatchers("/actuator/**").permitAll()
            .anyRequest().authenticated()
            .and().oauth2Client()
            .and().oauth2Login();
    }
}

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry
                    .addMapping("/api/myapp/**")
                    .allowedMethods("GET","POST","PUT","DELETE")
                    .allowedOrigins("http://localhost:7800");        
        }
    };
}

Spring Boot 3.1.3

@Configuration
@EnableWebSecurity
@EnableMethodSecurity
public class OAuthSecurityConfig {
    @Bean
    SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http              
                .cors(Customizer.withDefaults())
                .csrf(AbstractHttpConfigurer::disable)
                .authorizeHttpRequests((authz) -> authz
                        .requestMatchers("/actuator/**").permitAll()                      
                        .anyRequest().authenticated())
                .oauth2Client(Customizer.withDefaults())
                .oauth2Login(Customizer.withDefaults());

         // done
        return http.build();
    }

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(List.of("http://localhost:7800"));
    configuration.setAllowedMethods(List.of("GET","POST","PUT","DELETE"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/api/myapp/**", configuration);
    return source;
} // end corsConfigurationSource()

Answer 1

您可以尝试定义一个

FilterRegistrationBean

，就像我们在使用 Spring Boot 和 Vue.js 教程构建一个简单的 CRUD 应用程序中所做的那样。

@Bean
public FilterRegistrationBean simpleCorsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    // *** URL below needs to match the Vue client URL and port ***
    config.setAllowedOrigins(Collections.singletonList("http://localhost:8080"));
    config.setAllowedMethods(Collections.singletonList("*"));
    config.setAllowedHeaders(Collections.singletonList("*"));
    source.registerCorsConfiguration("/**", config);
    FilterRegistrationBean bean = new FilterRegistrationBean<>(new CorsFilter(source));
    bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
    return bean;
}

我们在JHipster中使用类似的东西。

FWIW，如果您使用 Spring Boot，则不需要在安全配置类上使用

@EnableWebSecurity

。你只需要

@Configuration

。