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 作為允許的來源。