AngularJS Spring Social Facebook CORS problem

Question

I'm trying to build a sample login using AngularJS(1.6) FE and Spring Boot(2.1) BE running on different ports. I'm using Spring Boot Social to enable FB login.

But when I try to login using Facebook, I get this:

CORS error

My FE looks like this:

<button ng-click="FBLogin()">Facebook Login</button>

Which will then call:

$scope.FBLogin = function(){
    FB.login(function(response) {
        if (response.status === 'connected') {
            console.log(response);
        } else {
            console.log("User cancelled login or did not fully authorize.");
        }
    }
}

My FE successfully gets an access token from Facebook.

Then my BE looks like this:

ActivityController.java

@RestController
@RequestMapping(value = "/act/")
public class ActivityController {
   @Autowired
   ActivityService activityService;

   @RequestMapping(value = "getallactivity")
   @ResponseBody
   public List<Activity> getAllActivity(Principal principal) {
       List<Activity> allActivity = activityService.getAllActivity();
       return allActivity;
   }
}

WebSecurityConfig.java

@Configuration
@EnableWebSecurity
@Order(-1)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

@Autowired
private UserDetailsService userDetailsService;

@Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
    auth.userDetailsService(userDetailsService);
}

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
    .cors()
    .csrf().disable()
    .authorizeRequests()
    .antMatchers("/", "/signup", "/login**", "/logout", "/auth/facebook")
        .permitAll()
    .antMatchers("/act/**")
        .authenticated()
    .and().formLogin()
      .loginProcessingUrl("/login") // Submit URL
      .loginPage("https://localhost:8444/#!/login")
      .usernameParameter("username")
      .passwordParameter("password");
}

@Bean
CorsConfigurationSource corsConfigurationSource() {
    System.out.println("CORS BEAN");
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("*"));
    configuration.setAllowedMethods(Arrays.asList("HEAD", "GET", "POST", "PUT", "DELETE", "OPTIONS"));
    configuration.setAllowCredentials(true);
    configuration.setAllowedHeaders(Arrays.asList("content-type", "accept", "X-Requested-With", "remember-me", "authorization"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}


@Override
public UserDetailsService userDetailsService() {
    return userDetailsService;
}
}

EDIT1

By sideshowbarker's suggestion I tried enabling CORS in my FE too. CORS error is now gone but any request that I send to my BE after logging in returns my FE's index.html

FE's WebSecurityConfig.Java

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
    .cors()
    .and().authorizeRequests()
    .antMatchers("/**")
        .permitAll()
      .and().formLogin()
      // Submit URL of login page.
    .loginProcessingUrl("https://localhost:8082/login")
    .loginPage("https://localhost:8444/#!/login")
    .defaultSuccessUrl("https://localhost:8444/#!/selectperson")
    .usernameParameter("username")
    .passwordParameter("password");
}

@Bean
CorsConfigurationSource corsConfigurationSource() {
    System.out.println("CORS BEAN");
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("*"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "DELETE", "OPTIONS"));
    configuration.setAllowCredentials(true);
    configuration.setAllowedHeaders(Arrays.asList("content-type", "accept", "X-Requested-With", "remember-me", "authorization"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}
}

EDIT2

Edited title to fit the current problem(previous was CORS error). Also I've tried to remove the CORS configuration in the FE then impelemented Zuul proxy to solve the CORS error and the same thing happens. Index.html is always returned by any request. So I guess my problem lies in my WebSecurityConfigurerAdapter. Am I missing something there?

EDIT3

Solved the original problem so I reverted the title back to "CORS problem" and added the CORS tag back. See answer if interested.

Answer 1

Ok so I've figured out a work around for this problem. I think Facebook javascript SDK's FBLogin function does not go well with my current implementation of Spring Social. It fails to authorize the user even on successful FB login so my backend tries to redirect me back to the login page in my front end(which does not have a CORS implementation) due to this code:

http.
.loginPage("https://localhost:8444/#!/login")

So instead of using the FBLogin function I redirected my page directly to /auth/facebook like so

    $scope.login = function(){
        $window.location.href = 'https://localhost:8082/auth/facebook';
    }