I'm having a difficult time getting a React app that I'm running locally talking with a spring boot app that's also running locally. I've setup the following CorsConfiguration within my spring boot application:
@Configuration
public class CORsConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").
allowCredentials(true).allowedOrigins("http://localhost:5173", "http://localhost:5173/login").
//allowedOriginPatterns("*").
allowedHeaders("Authorization",
"Cache-Control",
"Content-Type",
"Accept",
"X-Requested-With",
"Access-Control-Allow-Origin",
"Access-Control-Allow-Headers",
"Origin").exposedHeaders("Access-Control-Expose-Headers",
"Authorization",
"Cache-Control",
"Content-Type",
"Access-Control-Allow-Origin",
"Access-Control-Allow-Headers",
"Origin").allowedMethods("GET", "OPTIONS", "POST", "PUT", "DELETE", "PATCH");
}
}
I've tried manually adding a list of allowed origins corresponding to the various routes currently setup on the react app. I also tried just a '*' pattern on allowedOriginsPatterns hoping it would serve as just a catchall. But with just this configuration, I get blanket forbidden errors across the board. To be able to get anything at all going, I had to add the following bean in my configuration as well:
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.addFilterBefore(new CORSFilter(), BasicAuthenticationFilter.class);
http.cors().and().csrf().disable();
return http.build();
}
The CORSFilter class is a custom class I created that currently just spits out some debug information to stdout: a list of all the request headers because I wanted to verify that the authorization bearer token I was setting up from within react was passing correctly.
With the http.cors().and().csrf().disable() in place, I'm able to post some login credentials and get an authorized token back from spring boot, but when I subsequently send a request with the "Authorization" header containing that token, I get the following error:
:5173/:1 Access to XMLHttpRequest at 'http://localhost:8080/check' from origin 'http://localhost:5173' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
Any ideas where I'm going wrong here? It's especially strange that I'm setting up the CorsRegistry to accept from the origins I'm using, but it doesn't seem to actually do anything at all and the only way I can get any communications is by disabling the whole thing (which apparently isn't disabling everything since it's still blocking the preflight).
The problem ultimately turned out to be in a debug filter I'd originally added to spit out various information about the requests I was getting.
When I first started getting Cors related errors, I'd found various related posts that were manually setting headers on the response object. I'd implemented those suggestions then promptly forgot all about it after changing things up to use the CorsConfiguration. Removing all those manual header sets got things working.