Keycloak 23.0.4跨域配置问题：Angular客户端登录API遭CORS拦截

针对你遇到的跨域问题，以下是具体的排查和解决方法：

1. 找对配置的客户端（不要改admin-cli） #

你需要配置Angular应用对应的Keycloak客户端，而非admin-cli：

• 登录Keycloak控制台，进入目标Realm，打开「Clients」列表，选择你为Angular创建的客户端。
• 根据Keycloak版本定位「Web Origins」字段：
  • 新版本（17+ Quarkus架构）：在客户端详情的「Settings」标签下方，或「Security Defenses」标签里。
  • 旧版本：先将客户端的「Access Type」设置为public（前端应用必须用此类型），之后会显示「Web Origins」选项。
• 在「Web Origins」中输入+（测试场景允许所有来源），或指定Angular应用的具体域名（如http://localhost:4200），保存配置。

2. 检查Keycloak服务端的全局CORS配置（若客户端配置无效） #

如果客户端配置后仍报错，需检查服务端的全局CORS设置：

• Quarkus版本（Keycloak 17+）：
  编辑keycloak.conf文件，添加以下配置：

  cors=true
  cors-allowed-origins=*
  

  保存后重启Keycloak。
• Wildfly版本（旧版Keycloak）：
  编辑standalone.xml（或standalone-ha.xml），在Undertow子系统中添加CORS响应头过滤器：

  <subsystem xmlns="urn:jboss:domain:undertow:12.0">
    <filters>
      <response-header name="Access-Control-Allow-Origin" header-value="*"/>
      <response-header name="Access-Control-Allow-Methods" header-value="GET, POST, OPTIONS, PUT, DELETE"/>
      <response-header name="Access-Control-Allow-Headers" header-value="Authorization, Content-Type"/>
    </filters>
    <!-- 其他原有配置 -->
  </subsystem>
  

  重启Keycloak服务生效。

3. 验证Angular端的Keycloak初始化配置 #

确保Angular项目中Keycloak的初始化参数正确匹配服务端配置：

import { KeycloakService } from 'keycloak-angular';

export function keycloakInitializer(keycloak: KeycloakService): () => Promise<any> {
  return () => keycloak.init({
    config: {
      url: 'http://你的Keycloak地址:8080/auth',
      realm: '你的Realm名称',
      clientId: '你为Angular创建的客户端ID'
    },
    initOptions: {
      onLoad: 'login-required',
      checkLoginIframe: false
    }
  });
}

内容的提问来源于stack exchange，提问作者VincenzoRotondi