重定向到登录时的 Keycloak CORS 问题

Posted 2023-02-19

【中文标题】重定向到登录时的 Keycloak CORS 问题

【英文标题】：Keycloak CORS issue when being redirected to login

【发布时间】：2018-02-23 12:34:54

【问题描述】：

我正在尝试让nodeJS keycloak adapter 与我的 Express 应用程序一起使用，但是当它尝试重定向到我使用 keycloak 中间件保护的路由的登录页面时遇到了 CORS 问题：

XMLHttpRequest 无法加载 http://192.168.132.44:8080/auth/realms/Actora/protocol/openid-connect/auth?client_id=actora-test&state=0e9c9778-c41b-4aa8-8052-d0f0125045ac&redirect_uri=http%3A%2F%2Flocalhost%3A5001%2Fauth%2Fchecktoken%3Fauth_callback%3D1&scope=openid&response_type=code。 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:5001” 访问。

在我的 keycloak 客户端设置中，我在 Web Origins 配置部分添加了一个“*”值。

我还使用 node cors 库在我的 node express 应用程序上启用了 cors，遵循这个 express 指南here

var cors =  require('cors'),
  app = express();

app.use(cors());
app.options('*', cors()); //enable for all pre-flight requests

我使用 3.2.1 版本的 keycloak 以防万一（我看到一个新版本作为 RC 发布）

有没有人遇到过类似的问题并设法解决了？我一直在研究许多 JBOSS 邮件列表线程和其他 ***，似乎都建议将“*”条目添加到 keycloak 管理站点上客户端的 web 起源配置部分中，但情况并非如此我。

谢谢

【问题讨论】：

您的节点应用程序不提供http://192.168.132.44:8080/auth/realms/Actora/protocol/openid-connect/auth 端点，对吧？而是由运行 JBOSS 的其他服务器提供服务？

正确，这是否意味着另一台服务器需要某种形式的 CORS 启用，即我们的 keycloak 正在运行的 JBOSS 服务器？

不，那不应该是必需的，你能否提供更多关于你的 NodeJS 应用程序的细节，你如何为前端服务？或者是一个单独的网络应用程序？您是否使用仅承载？

是的，您必须在运行 keycloak 的 JBOSS 服务器上启用 CORS。 （CORS 启用您为前端客户端代码提供服务的节点后端不相关，因为这不是您的前端代码向其发送跨域请求的服务器。）

我们的节点和 web 应用程序位于同一个项目文件夹中，我们的 express 应用程序从构建目录为我们的 web 应用程序 (angularJS) 提供服务。我们不是仅使用承载，而是使用凭据作为访问类型。

【参考方案1】：

我也在用 mindparse 解决这个问题。

我认为这里的关键问题是 keycloak 服务器没有响应任何 ACCESS-CONTROL-ALLOW-ORIGIN 标头，尽管事实上他已在 keycloak 管理门户中正确配置了“web Origins”设置。

更深入的流程是：

用户尝试在 node express 服务器上调用 keycloak 安全路由 Keycloak 中间件检测到用户未通过身份验证，并且 使用 302（重定向）到托管的自定义登录页面响应请求 由 keycloak 服务器提供。 浏览器向keycloak服务器发送OPTIONS请求，检查是否为 因为这是一个跨域请求。 keycloak 服务器响应不包括 ACCESS-CONTROL-ALLOW- ORIGIN 标头告诉浏览器它有权进行此操作 请求。 浏览器然后读取此响应，因此不进行后续操作 up 请求，因为它没有通过访问控制允许来源检查

【讨论】：

您能详细说明第 1 步吗？我怀疑你做了一个 XMLHttpRequest ，这对重定向没有意义。仅当浏览器直接执行重定向（而不是通过 ajax 调用）时，重定向才有意义。请参阅我之前对 OP 的评论，了解此方面的好方法。

没错，是的。我们有一个 Angular 应用程序，它会在导航到任何 Angular 状态时调用以检查用户是否已登录。这意味着当用户在浏览器中导航到网站时，它会立即在我们的 express 服务器中调用我们的 checktoken 方法。但从你所说的听起来好像不可能以我们尝试的方式/流程来保护 api 资源？您必须先保护客户端，然后使用客户端的令牌访问服务？

我想我遇到了同样的问题，解决这个问题的正确流程是什么？

@Balkrishna，我遇到了同样的问题，但由于我之前错过了一些信件，因此通过替换秘密得到了解决

【参考方案2】：

我遇到了完全相同的问题。我正在使用 Keycloak 6.0.1

在我的例子中，我必须在我的 Java 后端服务器的 keycloak.json 中添加 "enable-cors": true。

之后，我遇到了另一个问题：401 UNAUTHORIZED。 This post 解决了问题

【参考方案3】：

只需在 Keycloak 客户端设置的“Web Origins”字段中输入您的应用程序的 url，如“http://localhost:8081”即可。

【讨论】：

绝对是为我做的！谢谢你:-)

【参考方案4】：

我在尝试连接到 KeyCloak 时也遇到了 CORS 问题，即使我正确填写了“Web Origins”网址。

原来我不小心连接到了错误的应用程序（客户端）和租户（领域），因此没有通过 CORS 检查。指向正确的应用程序和租户解决了我的问题。