KeyCloak Spring Boot后端和Angular前端，CORS错误

Question

我试图在Angular 9中构建前端应用程序，在spring boot中构建后端应用程序。

使用KeyClope对用户进行身份验证和授权。

我在Key斗篷上创建了两个客户端，一个前端是公共访问类型，一个后端是仅承载的。

angular应用程序是使用本教程配置的https://www.npmjs.com/package/keycloak-angular

spring boot应用程序配置了此应用程序。属性

spring.profiles.active=development
server.port=9000

keycloak.enabled = true
keycloak.realm                      = test-realm
keycloak.auth-server-url            = http://localhost:8080/auth/
keycloak.ssl-required               = external
keycloak.resource                   = backend
keycloak.credentials.secret         = 5353e8ee-80b5-4c2b-b543-c08247475868
keycloak.use-resource-role-mappings = true
keycloak.bearer-only                = true

keycloak.cors = true

keycloak.securityConstraints[0].securityCollections[0].name = protected resource
keycloak.securityConstraints[0].authRoles[0] = user
keycloak.securityConstraints[0].securityCollections[0].patterns[0] = /products
keycloak.securityConstraints[0].securityCollections[0].patterns[1] = /products/

当我试图从我得到的角度应用程序上发布 /products时

看看各种例子，我试图用这种方式修改springboot的application.properties文件

spring.profiles.active=development
server.port=9000

keycloak.enabled = true
keycloak.realm                      = test-realm
keycloak.auth-server-url            = http://localhost:8080/auth/
keycloak.ssl-required               = external
keycloak.resource                   = frontend
keycloak.bearer-only                = true
keycloak.public-client=true
keycloak.cors = true

keycloak.securityConstraints[0].securityCollections[0].name = protected resource
keycloak.securityConstraints[0].authRoles[0] = user
keycloak.securityConstraints[0].securityCollections[0].patterns[0] = /products
keycloak.securityConstraints[0].securityCollections[0].patterns[1] = /products/

而且是有效的，但据我所知，最正确的方法是在KeyClope上为前端和后端提供两个独立的客户端。

我哪里错了，为什么我会得到CROS错误？？？我在Angular应用程序上检查了这一节，但没问题https://www.npmjs.com/package/keycloak-angular#client-configuration

我认为问题是Angular上的配置不正确，但我不知道是什么。

Answer 1

TL； DR

经过数小时的测试，我发现问题仅仅是这个标志keydepose。使用资源角色映射=true

拆下后，一切都开始正常工作。

更多细节

在添加这个类之后，我发现CORS错误实际上是一个错误的线索

@Configuration
public class FilterProvider {

    @Bean
    public WebMvcConfigurer corsConfiguration() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedMethods(HttpMethod.GET.toString(), HttpMethod.POST.toString(),
                                HttpMethod.PUT.toString(), HttpMethod.DELETE.toString(), HttpMethod.OPTIONS.toString())
                        .allowedOrigins("*");
            }
        };
    }
}

我得到了403未经授权的错误，所以问题不在CORS设置中，而是在其他地方<密码>钥匙斗篷。使用资源角色映射=true

Answer 2

首先，在config类中需要这个@Bean。如果使用不同的url，请更改allowedOrigins。也许您需要在控制器中添加@CrossOrigin注释。其次，您需要添加http。如果您使用的是Spring Security，请使用配置方法中的cors（）。

@Configuration
@EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("https://localhost:4200");
            }
        };
    }

}

Spring Security config的示例方法，如果您正在使用它：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
            .cors().and()
            .csrf().disable()
            .authorizeRequests()
            .antMatchers(HttpMethod.OPTIONS, "/api/**").permitAll()
            .anyRequest().permitAll()
            .and().httpBasic();
}