Question

我正在尝试创建一个将前端和后端资产分开的应用程序。举例来说，假设前端最终将被托管在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（）按钮，我得到了同样的结果：

我想问一下，是否有可能以这种方式分离资产？如果是这样，我在哪里犯错？

谢谢！

Answer 1

您看到的CORS消息是因为您的代码正在向https://github.com/login/oauth/authorize发送跨源请求，但来自github的响应不包含Access-Control-Allow-Origin响应标头。

因此，您对Spring代码中的CORS配置所做的任何更改都无关紧要 - 它不会有任何区别，因为需要更改的行为是在github端，而您无法更改。< / p>

您可能要么想要从后端执行oauth请求而不是现在正在执行的前端代码，要么使用https://github.com/Rob--W/cors-anywhere/等设置CORS代理，或者设置类似{ {3}}：

由于某些与安全相关的限制，Github阻止您在仅客户端应用程序上实现OAuth Web应用程序流。

这是一个真正的无赖。所以我们建立了Gatekeeper，这是你需要的缺失部分才能使它工作。

Gatekeeper适用于Github.js，它可以帮助您从浏览器访问Github API。

Answer 2

如果您使用的是Spring-Boot，可以在弹簧配置中执行此操作：

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://localhost:8080", "http://127.0.0.1:8080");
            }
        };
    }

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

2 个答案: