Spring Boot 3, Keycloak, Security of Angular Microservice Application API Gateway and Cros Origin, Web Filter are configured when the following error is received?
Access to fetch at 'http://localhost:9090/api/v1/programs' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
@Configuration
@EnableWebFluxSecurity
public class SecurityConfiguration {
@Bean
public SecurityWebFilterChain securityWebFilterChain(ServerHttpSecurity http) {
http.csrf().disable()
.authorizeExchange(authorize ->
authorize.pathMatchers("/api/v1/users/**").permitAll()
.pathMatchers("/eureka/**").permitAll()
.anyExchange().authenticated())
.oauth2ResourceServer(ServerHttpSecurity.OAuth2ResourceServerSpec::jwt);
return http.build();
}
@Bean
public CorsWebFilter corsWebFilter() {
CorsConfiguration corsConfig = new CorsConfiguration();
corsConfig.setAllowedOrigins(List.of("*"));
corsConfig.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));
corsConfig.setMaxAge(3600L);
corsConfig.addAllowedHeader("Content-Type");
corsConfig.addAllowedHeader("X-Requested-With");
corsConfig.addAllowedHeader("Authorization");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", corsConfig);
return new CorsWebFilter(source);
}
}
server.port=9090
spring.application.name=api-gateway
spring.cloud.compatibility-verifier.enabled=false
spring.mvc.dispatch-options-request=true
logging.level.root=INFO
logging.level.org.springframework.cloud.gateway.route.RouteDefinitionLocator=INFO
logging.level.org.springframework.cloud.gateway=TRACE
spring.cloud.gateway.routes[0].id=subject-service-api
spring.cloud.gateway.routes[0].uri=lb://subject-service-api
spring.cloud.gateway.routes[0].predicates[0]=Path=/api/v1/subjects/**
spring.cloud.gateway.routes[1].id=program-service-api
spring.cloud.gateway.routes[1].uri=lb://program-service-api
spring.cloud.gateway.routes[1].predicates[0]=Path=/api/v1/programs/**
spring.cloud.gateway.routes[2].id=registration-service-api
spring.cloud.gateway.routes[2].uri=lb://registration-service-api
spring.cloud.gateway.routes[2].predicates[0]=Path=/api/v1/registrations/**
spring.cloud.gateway.routes[3].id=eureka-server-api
spring.cloud.gateway.routes[3].uri=http://localhost:8761
spring.cloud.gateway.routes[3].predicates[0]=Path=/eureka/web
spring.cloud.gateway.routes[3].filters[0]=SetPath=/
spring.cloud.gateway.routes[4].id=eureka-server-api-static-resource
spring.cloud.gateway.routes[4].uri=http://localhost:8761
spring.cloud.gateway.routes[4].predicates[0]=Path=/eureka/**
#eureka configuration
eureka.client.serviceUrl.defaultZone=xxx
#Keycloak security config
spring.security.oauth2.resourceserver.jwt.issuer-uri=xxx
Two possible things to do:
Configure Angular's proxy as described here.
Try setting the header Access-Control-Allow-Origin in the response that Spring Gateway returns to your Angular application like described here. In a more realistic environment you would probably configure your reverse proxy with this header, but it looks like you are testing locally so setting the header in the gateway to *
or http://localhost:4200
should work I think.