Angular SPA调用Keycloak接口列出所有Realm出现CORS错误如何解决

你需要配置的是你的Angular应用在Keycloak中注册的对应公开客户端，而非realm-management内置客户端，具体配置步骤如下：

• 登录Keycloak管理控制台，切换到Angular应用对接的目标Realm，进入「客户端」列表，找到你的Angular应用对应的客户端条目进入详情页
• 在「设置」标签页的访问配置区域，找到*Web Origins（Web源）*配置项
• 填入你SPA的访问源地址，即报错信息中提示的https://localhost:9001，开发测试阶段可临时填*允许所有源访问，生产环境请填写实际部署的正式域名
• 保存配置后等待1分钟左右生效，清空浏览器缓存后重新发起请求即可

如果配置后仍然存在跨域问题，可尝试以下两种方案：

1. 检查Keycloak前置反向代理的配置，确保代理没有丢弃请求的Origin头，Keycloak需要读取该头判断是否返回CORS响应头
2. 生产环境更推荐使用后端中转方案：新增一个你自有后端的代理接口，Angular前端先请求自有后端，后端使用服务端凭证调用Keycloak的/auth/admin/realms接口，再将结果返回给前端，完全规避前端跨域问题的同时，也避免了Keycloak管理接口的调用权限直接暴露在前端，降低安全风险。

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