集成Okta后Angular调用Spring Boot接口遇CORS拦截求解决方案

问题核心原因 #

Okta Spring Boot Starter会自动注册优先级高于Spring MVC @CrossOrigin的CORS过滤器，导致控制器上的跨域注解被覆盖。浏览器发送的预检OPTIONS请求会被Okta过滤器拦截，未返回正确的CORS响应头，最终触发跨域拦截报错。

解决方案 #

方案1：通过Okta配置属性直接设置CORS #

在Spring Boot的配置文件中添加Okta专属的CORS配置，覆盖默认规则，无需自定义代码：

application.properties

okta.cors.allowed-origins=http://localhost:4200
okta.cors.allowed-methods=GET,POST,PUT,DELETE,OPTIONS
okta.cors.allowed-headers=Authorization,Content-Type
okta.cors.allow-credentials=true
okta.cors.max-age=3600

application.yml

okta:
  cors:
    allowed-origins: http://localhost:4200
    allowed-methods: GET,POST,PUT,DELETE,OPTIONS
    allowed-headers: Authorization,Content-Type
    allow-credentials: true
    max-age: 3600

方案2：自定义CORS配置类（复杂场景适用） #

如果需要更灵活的CORS规则，可以创建自定义配置类，覆盖Okta的默认CORS过滤器：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import java.util.List;

@Configuration
public class CorsConfig {

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(List.of("http://localhost:4200"));
        config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        config.setAllowedHeaders(List.of("Authorization", "Content-Type"));
        config.setAllowCredentials(true);
        config.setMaxAge(3600L);

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

前端代码修正 #

前端请求中无需添加Access-Control-Allow-Origin头（该头由后端响应返回），移除后避免不必要的请求异常：

getMessages(): Observable<Message[]> {
      const apiUrl = 'http://localhost:8080/api/messages';
      const accessToken = this.oktaAuth.getAccessToken();
      const headers = new HttpHeaders({'Authorization': 'Bearer ' + accessToken});
      return this.http.get<Message[]>(apiUrl, {headers: headers});
  } 

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