重定向到 Keycloak 時來自 Angular 的 CORS 錯誤

Question

我在 Apache 端部署了一個 SPA 應用程序作為靜態文件。
我使用 apache 模塊 mod_auth_openidc 作為 RP 來驗證用戶。
我使用 Spring boot 作為后端 API。 我使用 Keycloak 作為 IDP。
在第一次身份驗證期間，重定向到 Keycloak 正確完成，並且從 SPA 到 Java 后端的 API 調用工作正常。 但是，會話到期后，當用戶單擊 SPA 中的鏈接時，他會自動重定向到 IDP（通過 HTTP 302 代碼）。 但這一次瀏覽器引發了 CORS 錯誤。 因為 MIME 類型不正確。

這是Apache端使用的配置。

OIDCCryptoPassphrase a-random-secret-used-by-apache-oidc-and-balancer
OIDCClientID myapp
OIDCClientSecret xxxxxxxxxxxxxxxxxxx
OIDCScope "openid"
OIDCProviderMetadataURL https://keycloak-host/auth/realms/myclient/.well-known/openid-configuration
OIDCRedirectURI https://myapp-host/myapp/accueil

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Methods "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS"
Header always set Access-Control-Max-Age "3600"
Header always set Access-Control-Allow-Headers "Content-Type, Accept, X-Requested-With, Authorization"

<Location /myapp/>
    AuthType openid-connect
    Require valid-user
    LogLevel debug
</Location>

# only Api request is forwaded to backend Java
SetEnvIf Request_URI !"/myapp/api/*" no-j 
JkMount  /myapp/api/* app1

這是Keycloak配置：
有效的重定向 URI = 'https://myapp-host/*'
網絡來源 = '+'

你知道錯誤的原因嗎？ 這是 Chrome 控制台中的錯誤：

拒絕執行來自 'https://keycloak-host/auth/realms/intradef/protocol/openid-connect/auth?response_type=code&scope=openid&client_id=mayapp&state=cdPzfatA1au8hWag3puQWeYXzlc&redirect_uri=https%3A%2F%2F10.2133 2Fmyapp%2Faccueil&nonce=MxMAAJWaVX0dCcHgHSp94S24_JTDJA6D8D4i6UloCx8' 因為它的 MIME 類型（'text/html'）不可執行，並且啟用了嚴格的 MIME 類型檢查。

Answer 1

1.) 您為 SPA 使用了不合適的流量

沒有理由保護靜態文件。 SPA 應該使用OpenId Connect Auth Code Flow + PKCE初始化和管理自己的會話。 通常，為您的 SPA 技術使用一些經過認證的庫，您應該沒問題。

順便說一句：靜態 CORS 配置不符合規范： https : //developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

在帶有憑證的請求中，它被視為沒有特殊語義的文字標頭名稱“*”。 請注意， Authorization 標頭不能使用通配符，並且始終需要明確列出。

2.) API 也沒有正確響應

它應該響應 401（未經授權），而不是 302 重定向。 302 是針對 Web 應用程序重定向的，而不是針對 SPA API 調用。 SPA API 調用在后台進行，因此用戶不會在后台看到任何登錄屏幕。

整體設計對於 SPA/API 方法來說並不是最好的。 我會使用更好的實現，然后你就不會遇到 CORS 問題。