Spring 引导 - Angular CORS 重定向到 Keycloak 登录页面时出现问题

Question

我有一个简单的 Rest API 写在 Spring Boot. 我已经使用 Keycloak 实现了 OAuth2。 我有一个用 Angular 编写的 UI。

我的期望是，当我从 Angular 页面点击 API url（比如单击按钮）时，我应该被重定向到 Keycloak 登录页面。 但是当我尝试从 Angular 应用程序访问 API 时，出现以下错误。

访问 XMLHttpRequest at 'http://localhost:8080/realms/CloudBrokerRealm/protocol/openid-connect/auth?response_type=code&client_id=cloud-broker-client2&scope=openid&state=pgUtz5IX5ONC3NQ6o9v3IbPnB2DB9rUr3O40tuRxlocalGHY%80D&redirect /oauth2/code/keycloak&nonce=CjpTbFvhBqxD0Rz4SQk49rT-wsB3C279NlGHDExlh6M'（从'http://localhost:8085/scheduler/read'重定向）来自'http://localhost:4200'已被CORS策略阻止：无'Access- Control-Allow-Origin' header 出现在请求的资源上。

当我点击 API http://localhost:8085/scheduler/read 通过点击 Angular 中的按钮时，它试图重定向到 Keycloak 登录页面，但由于 CORS 错误，Keycloak 的登录页面没有出现。

For accessing the backend API http://localhost:8085/scheduler/read, I have done the CORS configuration in Spring Boot and no CORS issues with this API when I directly accessing this API url from browser and Keycloak Login Page is coming. 但是，当从 Angular 应用程序运行在 http://localhost:4200 时，我们试图访问 API，它正试图重定向到 Keycloak 登录页面 http://localhost:8080/realms/CloudBrokerRealm/protoco。 ……

我在客户端下的 Keycloak 中添加了 Web Origins，但 CORS 问题仍然存在。 有没有办法绕过 CORS 问题，或者我们可以在 Keycloak 中禁用 CORS。 我将 Keycloak 作为 docker 容器运行。

Spring 引导应用程序.properties：

server.port=8085

spring.security.oauth2.client.registration.keycloak.client-id=cloud-broker-client2
spring.security.oauth2.client.registration.keycloak.authorization-grant-type=authorization_code
spring.security.oauth2.client.registration.keycloak.scope=openid

spring.security.oauth2.client.provider.keycloak.issuer-uri=http://localhost:8080/realms/CloudBrokerRealm
spring.security.oauth2.client.provider.keycloak.user-name-attribute=preferred_username


spring.security.oauth2.resourceserver.jwt.issuer-uri=http://localhost:8080/realms/CloudBrokerRealm

Answer 1

显然，您将 REST API 配置为客户端（使用spring-boot-starter-oauth2-client和 oauth2Login）。

这是错误的。 REST API 是资源服务器，必须配置spring-boot-starter-oauth2-resource-server 。 如果您不知道如何操作，请按照我的教程进行操作。

要简化客户端上的 OAurh2 处理，请使用 OIDC 客户端库。 我最喜欢 Angular 是angular-auth-oidc-client 。

一旦以上两点都解决了，Keycloak 和你的 REST API 上只需要 http://localhost:4200 作为允许的来源。