Spring Security allows requests from all origins locally, but blocks my Angular app when...

I'm having an issue with my Spring Security CORS configuration. I'm testing my API locally with multiple profiles, and I’ve deployed the API and Angular app to Cloud Run (on different GCP projects).

I’m seeing different behavior locally vs. in the cloud, and I’m struggling to figure out why.

What’s happening:

• 
  Locally: When I test the Spring Boot API with my Angular app using a proxy (proxy.dev.conf.json or proxy.prod.conf.json), everything works fine. However, the /public/cars endpoint is accessible from any origin, even though I’ve set specific allowed origins in Spring Security.
  
  
• 
  Cloud Run deployment: When I deploy both the Angular app and API, the Because it tries to access an angular route instead of communicating with the API! However, if I access the API directly from the browser (without using Angular), I can still hit the /public/cars endpoint and get the data, even when the origin should be blocked.
  

My Spring Security Configuration:

@Configuration
@EnableWebSecurity
@Slf4j
public class SecurityConfig {

@Value("${allowed.origins}")
private String allowedOrigins;

@Bean
public SecurityFilterChain apiFilterChain(HttpSecurity http) throws Exception {
http.csrf(AbstractHttpConfigurer::disable)
.cors(httpSecurityCorsConfigurer -> httpSecurityCorsConfigurer.configurationSource(corsConfigurationSource()))
.authorizeHttpRequests(
authorize -> authorize
.requestMatchers("/swagger-ui/**", "/v3/api-docs/**", "/swagger-ui.html").permitAll()
.requestMatchers("/public","/public/**").permitAll() // Public endpoints
.anyRequest().authenticated()
)
.sessionManagement(sessionManagement -> sessionManagement.sessionCreationPolicy(SessionCreationPolicy.STATELESS));

return http.build();
}

@Bean
CorsConfigurationSource corsConfigurationSource() {
log.info("allowed origins : {}", allowedOrigins);
CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowedOrigins(List.of(allowedOrigins));
configuration.setAllowedHeaders(List.of("X-API-KEY", "Content-Type", "Authorization", "Cache-Control"));
configuration.setExposedHeaders(List.of("X-Rate-Limit-Remaining", "X-Rate-Limit-Retry-After-Seconds", "Cache-Control", "Content-Type", "Access-Control-Expose-Headers", "Access-Control-Allow-Origin"));
configuration.setAllowedMethods(List.of("GET", "POST", "DELETE", "PUT"));
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}

}


My Angular proxy configuration:

// proxy.dev.conf.json:

{
"/api": {
"target": "https://api.testcars.com",
"secure": false,
"changeOrigin": false,
"pathRewrite": {
"^/api": ""
}
}
}


What I’m seeing:

• 
  Locally: I can access /public/cars from any origin, even though I’ve specified allowed origins in Spring Security.
  
  
• 
  Cloud Run (deployed):
  
  Angular app: The app can’t communicate with the API because of CORS errors.
  
  Direct API access (via browser): I can hit the deployed API and get responses from /public/cars without any CORS issue, even if the origin isn’t allowed.
  

Questions:

• 
  Why can I access /public/cars from any origin locally, even though I’ve set allowed origins in Spring Security?
  
  
• 
  Why can’t my Angular app communicate with the API when both are deployed to Cloud Run?
  
  
• 
  Why am I able to directly access the API from the browser but not through the Angular app?
  

Continue reading...