1

Cross domain request from my angular app to a spring boot backend is blocked by CORS, only with POST, PUT. GET is allowed and working as expected.

Here is my config ..

Backend :

cors filter -

@Configuration
public class CORSConfiguration {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();

        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
        corsConfiguration.setAllowedMethods(Arrays.asList("PUT", "POST", "GET", "DELETE", "OPTIONS"));
        corsConfiguration.setAllowedHeaders(Arrays.asList("Origin", "X-Requested-With", "X-Requested-By",
                "Content-Type", "Accept", "Authorization"));
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfiguration extends WebSecurityConfigurerAdapter {
@Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity.cors().and()
                    .csrf().disable()
                    .authorizeRequests()
                    .antMatchers(HttpMethod.OPTIONS).permitAll()
                    .antMatchers("/*").authenticated().and()
                    .jee().mappableAuthorities("xxxxxxx");

    }
}

ng :

public postIT(payload: Data): Observable<Data> {
    return this.http.post<Data>(url, payload) , {
      withCredentials: true
    });
  }

Errors :

What am I leaving out here? Please let me know.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
iManiac
  • 31
  • 8
  • The specific problem is that the server is responding with a 401 error to the CORS preflight OPTIONS request — apparently because it requires authentication for the route, even or OPTIONS requests. The fix is that the server configuration must be changed so that it allows unauthenticated OPTIONS requests, and responds to them with a 200 OK. See the answer at https://stackoverflow.com/a/45406085/441757 – sideshowbarker Nov 10 '20 at 23:00
  • Right, I am already allowing OPTIONS req's to bypass the auth. by setting : `.antMatchers(HttpMethod.OPTIONS,"/**").permitAll()` – iManiac Nov 11 '20 at 03:54
  • Apparently that bypass is not sufficient to prevent that route from allowing unauthenticated OPTIONS requests. Otherwise you wouldn’t be getting a 401 response to the OPTIONS request. The image at https://i.stack.imgur.com/9ojsO.jpg definitely shows you’re getting a 401 response to the OPTIONS request. – sideshowbarker Nov 11 '20 at 06:49

2 Answers2

1

The mistake I did was in the web.xml, in which OPTIONS was included in the <security-constraint> element.

Removed it from here and with the rest of the config as is, I no longer see the issue.

enter image description here

iManiac
  • 31
  • 8
0

Can you please try to replace "AllowedHeaders" with the following list:

"Access-Control-Allow-Credentials", "Content-Type", "Access-Control-Allow-Headers", "X-Requested-With", "Origin", "Accept"

Andrian Soluk
  • 474
  • 6
  • 12
  • Just for the understanding purposes, Would you please give some explanation, on why this would help. – iManiac Nov 10 '20 at 09:47
  • The "Access-Control-Allow-Credentials" header tells browsers whether to expose the response to frontend JavaScript code when the request's credentials mode. The "Access-Control-Request-Headers" header is used by browsers when issuing a preflight request, to let the server know which HTTP headers the client might send when the actual request is made. – Andrian Soluk Nov 10 '20 at 09:56
  • Tried the above and the issue still remains. – iManiac Nov 10 '20 at 10:11