AngularJS Spring Social Facebook CORS problem

Question

我正在尝试使用AngularJS（1.6）Fe和Spring Boot（2.1）在不同端口上构建样本登录。我正在使用Spring Boot Social启用FB登录。

但是，当我尝试使用Facebook登录时，我会得到：

cors错误

我的fe看起来像这样：

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

然后致电：

$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.");
        }
    }
}

我的fe成功从Facebook获得了访问令牌。

然后我看起来像这样：

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

sideshowbarker的建议，我也尝试在FE中启用CORS。CORS错误现在已经消失了，但是我在登录后发送给我的任何请求以返回我的Fe index.html

Fe的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

编辑标题以适合当前问题（以前是CORS错误）。另外，我尝试删除FE中的CORS配置，然后推动Zuul代理来解决CORS错误，并发生同样的事情。任何请求始终返回index.html。因此，我想我的问题在于我的WebScurityConfigurerAdapter。我在那里错过了什么吗？

edit3

解决了原始问题，因此我将标题恢复到了" CORS问题"，并添加了CORS标签。如果有兴趣，请参见答案。

Answer 1

好吧，所以我已经找到了解决这个问题的工作。我认为Facebook JavaScript SDK的FBLOGIN功能与我当前对Spring Social的实现相关。即使在成功的FB登录中，它也无法授权用户，因此由于此代码，我的后端试图将我重定向回到前端的登录页面（没有CORS实现）：

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

因此，而不是使用FBLOGIN函数，而是将我的页面直接转移到/auth/facebook，例如so

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