Keycloak Spring boot 后端和 Angular 前端，CORS 错误

Posted 2023-02-27

【中文标题】Keycloak Spring boot 后端和 Angular 前端，CORS 错误

【英文标题】：Keycloak Spring boot backend and Angular frontend, CORS Error

【发布时间】：2020-11-05 06:43:57

【问题描述】：

我正在尝试在 Angular 9 中构建前端应用程序，并在 Spring Boot 中构建后端。

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

我在 keycloak 上创建了 2 个客户端，一个具有公共访问类型的前端和一个仅承载后端。

前端配置

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

spring boot 应用配置了这个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                   = 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/

当我尝试从 Angular 应用程序发布 /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/

并且有效，但据我了解，最正确的方法是在 keycloak 上为前端和后端设置 2 个单独的客户端。

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

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

【参考方案1】：

首先，您需要在配置类中使用这个@Bean。如果您使用不同的网址，请更改 allowedOrigins。也许您需要在控制器中添加 @CrossOrigin 注释。其次，如果您使用 Spring Security，则需要在配置方法中添加 http.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 配置的示例方法：

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

【讨论】：

好的，但在这种情况下我不使用 WebSecurityConfigurerAdapter 我只使用了 application.properties 文件，但我尝试了。

【参考方案2】：

TL;DR

经过几个小时的测试，我发现问题只是这个标志keycloak.use-resource-role-mappings = 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 设置中，而是在其他地方...the keycloak.use-resource-role-mappings = true