title: Spring-Security + Angular 2 + CORS. Unable to redirect Facebook signin
body: <p>I'm building an application that uses Angular 2 on the front end, and Spring Boot on the backend. I am using Spring-Security and Spring Social to allow login through Facebook. I thought I had configured CORS correctly, but I am getting the following error message:</p>
  
  <pre><code>XMLHttpRequest cannot load http://localhost:8080/auth/facebook. The request was redirected 
  to 'https://www.facebook.com/v2.5/dialog/oauth?client_id=1113908502021844&amp;respo…alhost%3A8080%2Fauth%2Ffacebook&amp;state=d4fb1987-9042-4d49-8bf9-6b5ec94c45f6', 
  which is disallowed for cross-origin requests that require preflight.
  </code></pre>
  
  <p>My security config looks like this:</p>
  
  <pre><code>@Override
  protected void configure(HttpSecurity http) throws Exception {
  
      http
          .authorizeRequests()
              .antMatchers("/auth/**", "/signup/**", "/user/login")
              .permitAll()
              .antMatchers("/**").authenticated()
              .antMatchers("/rest/**").hasAnyRole("USER", "ADMIN")
              .and()
          .headers() //might need defaults disabled
              .and()
          .exceptionHandling()
              .and()
          .cors()
              .and()
          .csrf().disable()                
          .rememberMe()
              .and()
          .apply(new SpringSocialConfigurer());
  
  }
  </code></pre>
  
  <p>My CORS config:</p>
  
  <pre><code>@Bean
  CorsConfigurationSource corsConfigurationSource() {
      CorsConfiguration configuration = new CorsConfiguration();
      UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  
      configuration.setAllowCredentials(true);
      configuration.addAllowedOrigin("*");
      configuration.addAllowedHeader("*");
      configuration.setAllowedMethods(Arrays.asList("GET","POST", "PUT"));
  
      source.registerCorsConfiguration("/**", configuration);
      return source;
  }
  </code></pre>
  
  <p>My frontend request (blocks both <strong>get()</strong> and <strong>post()</strong>):</p>
  
  <pre><code>facebookAuth(){
  let tokenUrl = 'http://localhost:8080/auth/facebook';
  let headers1 = new Headers({'Content-Type': 'application/json'});
  
  return this.http.get(tokenUrl,  {headers: headers1});
  </code></pre>
  
  <p>}</p>
  
  <p>Last, my network info:</p>
  
  <p><a href="https://i.stack.imgur.com/yxOiJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yxOiJ.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/Krs73.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Krs73.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/dEs7A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dEs7A.png" alt="enter image description here"></a></p>
  
  <p>What am I missing here? CORS only seems to block the Facebook redirect, while letting other requests through without issue. </p>