OAuth2.0 - 使用 GitHub 进行身份验证，前端和后端运行在不同的服务器上。CORS 错误

我正在尝试创建一个将前端和后端资产分开的应用程序。例如，假设前端最终将托管在 gh-pages 上，而后端将部署在 Heroku 上。

我想使用 OAuth2.0 协议对我的客户进行身份验证，GitHub 作为我的主要提供者。

作为“概念证明”，我想创建一些利用这种身份验证的虚拟应用程序。下面是代码：

前端（Angular2 应用程序） - 在 localhost:8080 上启动

// template
<h1>
  {{title}}
</h1>
<button type="button" (click)="getServerResponse()">getServerResponse()</button>
<h1>{{response}}</h1>

// component
export class AppComponent {
  title = 'app works!';
  response = 'server response';

  constructor(private http: Http) {}

  getServerResponse() {
    this.http.get('http://localhost:9000/hello')
      .subscribe(res => this.response = JSON.stringify(res.json()));
  }
}

后端（Java + Spring 应用程序）- 在 localhost:9000 上启动

// Application.java
@SpringBootApplication
@EnableOAuth2Sso
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

// HelloController.java
@Controller
public class HelloController {

    @RequestMapping("/hello")
    public String hello() {
        return "Hello!";
    }
}

// FilterConfig.java
@Configuration
public class FilterConfig {

    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(1);
        return bean;
    }

}

// resources/config/application.yml
security:
  oauth2:
    client:
      clientId: xxx
      clientSecret: yyy
      accessTokenUri: https://github.com/login/oauth/access_token
      userAuthorizationUri: https://github.com/login/oauth/authorize
      clientAuthenticationScheme: form
      scope: repo, user, read:org
    resource:
      userInfoUri: https://api.github.com/user
  filter-order: 5

server:
  port: 9000

我已经尝试在 GitHub 上将localhost:8080和localhost:9000 注册为 OAuth 应用程序，但无论如何，每当我尝试单击 getServerResponse() 按钮时，我都会得到相同的结果：

我想问一下，这样的资产分割是否可行？如果是这样，我在哪里出错？

谢谢！