带有 Keycloak 的 Angular 和 Spring Boot REST API 的 CORS 问题答案

【问题标题】：CORS Issue with Angular and Spring Boot REST API With Keycloak带有 Keycloak 的 Angular 和 Spring Boot REST API 的 CORS 问题
【发布时间】：2021-05-22 02:22:14
【问题描述】：

我使用 keycloak(jboss/keycloak:12.0.3) 构建了 Spring Boot REST API(2.3.2.RELEASE)、Angular(v10) 应用程序身份验证和授权。

Spring Boot 应用程序已使用 KeycloakWebSecurityConfigurerAdapter 进行配置，Angular 前端使用 "keycloak-angular": "^8.1.0","keycloak-js": "^12.0.2" ，

目前我可以通过 keycloak 登录窗口使用 Angular 前端成功登录应用程序。但是在 Angular 项目中尝试使用 HttpClient 向 Spring Boot REST API 发出 POST 或 GET 请求时会出现 CORS 错误。

令牌正确绑定到请求。 此令牌有效，因为我可以通过 Postman 使用同一令牌调用此 API。

我尝试过的解决方案：

将 keycloak 管理员上的 Web 来源设置为 * - 不起作用
在 Spring Boot 应用程序的 application.properties 中设置 keycloak.cors = false - 不起作用
在 Spring 安全配置中设置 cors.disable - 也不起作用

@Override
protected void configure(HttpSecurity http) throws Exception {
  super.configure(http);

  http.cors().disable();
}

【问题讨论】：

听起来您使用的是 Angular，因为您指定了版本 10。Angular 是一个与 AngularJS 完全不同的框架。
CORS 是服务器端问题，与角度无关。您需要在服务器上启用 cors。一个简单的谷歌应该让你看到很多例子，例如here

标签： angular spring spring-boot keycloak keycloak-javascript

【解决方案1】：

我的 cors 配置有错误，所以基本上你的 keycloak 设置应该使用 spring security 完成，如下所示，它将解决 Spring boot 和 Keycloak 的任何类型的 CORS 相关问题。

转到 Keycloak 的管理控制台，将客户端的“Web Origins”设置为您的应用程序 Web 前端应用程序的地址（例如：- http://localhost:42）（或只是 * ）。
在您的 application.properties 中设置 keycloak.cors = true

【讨论】：