Keycloak-angular：访问/帐户失败，出现 403 错误和 CORS 消息

Posted 2023-02-22

【中文标题】Keycloak-angular：访问/帐户失败，出现 403 错误和 CORS 消息

【英文标题】：Keycloak-angular: access /account fails with 403 error and CORS message

【发布时间】：2020-06-11 17:27:44

【问题描述】：

我正在使用 angular-keycloak 7.1.0 和 keycloak 8.0.2（和 keycloak-js 8.0.2）。 我使用客户端创建了一个 openIdConnect 领域，配置了 Access Type: public 和细粒度 OpenID Connect 配置以创建 ES256 JWT（JSON Web 令牌）。

当我尝试通过我的 Ionic-Angular Web 应用程序（Chrome、Safari）登录时，如果用户尚未登录，则会显示 keycloak 登录表单。提交凭据后，成功调用 /token 端点并响应预期的 JWT。

但随后 keycloak-angular-lib 调用“http://localhost:8080/auth/realms/REALM_NAME/account”来访问用户配置文件，该配置文件提供：

Access to XMLHttpRequest at 'http://localhost:8080/auth/realms/REALM_NAME/account' from origin 
'http://localhost:1337' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is 
present on the requested resource.

更多提示：

我已经尝试了所有带有 * 和 + 的 keycloak 客户端配置变体、Web 源的相对和绝对路径以及有效的重定向 URI。

/token 请求工作正常。

我对客户端范围映射器进行了一些更改，尤其是在配置文件映射器上。

我可以通过邮递员访问 /account 路径

【问题讨论】：

响应的 HTTP 状态码是什么？您可以使用浏览器开发工具中的网络窗格进行检查。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？

啊，我得到了一个 http-403！

啊是的，那么，403 错误是您需要解决的实际问题。浏览器报告 CORS 错误的唯一原因是服务器系统默认情况下几乎从不将任何应用程序设置的自定义标头添加到 4xx 错误响应中。因此，如果您修复了 403 问题，您可能会发现 CORS 错误消失了，因为（对于 200 个 OK 成功响应）您现有的 CORS 配置已经按预期工作。

【参考方案1】：

我遇到了类似的问题，并且调用配置文件请求是导致 CORS 错误的原因

KeycloakService.loadUserProfile()

如前所述，在客户端范围内将“Full Scope allowed”设置为 true 解决了问题，但这不是我的首选解决方案，因为它会添加不需要的角色和受众。此外，由于组织政策，我无权访问 Account 客户，因此无法在我的客户范围内引用“view-profile”角色。

但是在我的情况下，用用户信息替换对用户个人资料的调用解决了这个问题，因为它避免了对帐户客户端的调用

KeycloakService.getKeycloakInstance().loadUserInfo()

【参考方案2】：

最后我发现是我的范围设置造成的。在客户端范围内将“Full Scope allowed”设置为true即可解决问题。

为了允许用户在禁用“允许完整范围”时访问他们的个人资料，我在我使用的用户访问客户端范围的客户端角色中将角色“查看配置文件”分配给“帐户”客户端用于用户登录。 （我没有意识到该帐户是该领域的自动创建的客户端）