[英]Keycloak Spring boot backend and Angular frontend, CORS Error
我正在嘗試在 Angular 9 中構建前端應用程序,並在 spring 引導中構建后端。
使用 keycloak 對用戶進行身份驗證和授權。
我在 keycloak 上創建了 2 個客戶端,一個具有公共訪問類型的前端和一個僅承載后端。
使用本教程https://www.npmjs.com/package/keycloak-angular配置 angular 應用程序
spring 引導應用程序配置了此應用程序。屬性
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 上的配置不正確,但我不知道是什么。
首先,您需要在配置 class 中使用這個@Bean
。 如果您使用不同的 url,請更改allowedOrigins
。 也許您需要在 controller 中添加@CrossOrigin
注釋。 其次,如果您使用 Spring 安全性,則需要在配置方法中添加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 安全配置的示例方法:
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.cors().and()
.csrf().disable()
.authorizeRequests()
.antMatchers(HttpMethod.OPTIONS, "/api/**").permitAll()
.anyRequest().permitAll()
.and().httpBasic();
}
TL;博士
經過數小時的測試,我發現問題只是這個標志keycloak.use-resource-role-mappings = true
刪除它后,一切都開始正常工作。
更多細節
我發現CORS錯誤實際上是一個錯誤的線索,添加這個class之后
@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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.