Angular如何调用集成Keycloak的后端API？附报错与配置截图

异常排查步骤（按优先级查，90%的问题都在这） #

• 代理配置问题排查
  前端开发代理必须开changeOrigin: true，不要额外加配置过滤Authorization请求头，80%的401问题都是代理把token头吞了。如果前后端端口不一致，后端8089服务别用*配跨域，Keycloak认证场景下通配符跨域直接失效，要明确填写允许的前端源，同时暴露Authorization响应头。
• 后端服务代码排查
  1. Keycloak连接参数不要填错：auth-server-url必须和前端访问Keycloak的地址完全一致，前端用localhost就别在后端写127.0.0.1，域不匹配会直接导致token校验失败；resource填写你在Keycloak创建的后端客户端ID，不要填成realm名；机密客户端不要漏填credentials.secret。
  2. 角色校验逻辑不要搞混：Keycloak默认会给角色加ROLE_前缀，如果你代码里写hasRole('user')，要么在Keycloak映射角色的时候带上前缀，要么直接在适配器里关闭前缀自动转换，不然会一直返回403。
  3. 先单独验证token有效性：把前端登录后拿到的token复制出来，本地解析查看realm_access.roles字段里有没有你需要的角色，再看后端日志有没有报签名错误、token过期、受众不匹配——如果是受众不匹配，去Keycloak客户端配置里把后端服务加到受众列表即可。
• 前端逻辑排查
  1. 要实现打开页面自动跳转登录，Keycloak初始化的onLoad参数必须设为login-required，设成check-sso只会做静默检测，不会主动跳转登录页。
  2. 发请求的时候不要漏了Bearer 前缀，授权头格式必须是Bearer 你的token，少了前缀后端会直接拒绝请求。
  3. 如果跳Keycloak环节就报跨域，去Keycloak控制台的前端客户端配置页，把前端本地访问地址加到「Web源」列表里。

可直接复用的标准实现流程 #

1. Keycloak控制台预配置
   • 新建业务使用的realm，在realm内创建测试角色（比如user、admin），新建测试用户并绑定对应角色
   • 新建前端公开客户端：访问类型选public，重定向URI填前端本地地址加通配符（比如http://localhost:5173/*），Web源填前端根地址（比如http://localhost:5173）
   • 新建后端机密客户端：访问类型选confidential，保存后记录生成的客户端密钥，把后端客户端加到前端客户端的受众列表中
2. 前端实现（以Vite+Vue/React+Axios为例）
   安装对应框架的Keycloak依赖，初始化逻辑参考：

   import Keycloak from 'keycloak-js'
   import axios from 'axios'
   
   const keycloak = new Keycloak({
     url: '你的Keycloak服务访问地址',
     realm: '之前创建的realm名',
     clientId: '前端公开客户端ID'
   })
   
   // 初始化时开启强制登录
   keycloak.init({
     onLoad: 'login-required',
     checkLoginIframe: false
   }).then(authenticated => {
     if (!authenticated) return window.location.reload()
     // 全局请求拦截器自动注入token
     axios.interceptors.request.use(config => {
       config.headers.Authorization = `Bearer ${keycloak.token}`
       return config
     })
     // 调用后端接口
     axios.get('http://localhost:8089/greet').then(res => console.log(res.data))
   })
   

   Vite本地代理配置参考：

   export default defineConfig({
     server: {
       proxy: {
         '/greet': {
           target: 'http://localhost:8089',
           changeOrigin: true
         }
       }
     }
   })
   

3. 后端实现（以Spring Boot为例）
   引入Keycloak Spring Boot Starter依赖，application.yml配置参考：

   keycloak:
     auth-server-url: 你的Keycloak服务访问地址
     realm: 之前创建的realm名
     resource: 后端机密客户端ID
     credentials:
       secret: 之前记录的后端客户端密钥
     security-constraints:
       - auth-roles:
           - user
         security-collections:
           - patterns:
               - /greet
   

   启动类添加注解@EnableGlobalMethodSecurity(prePostEnabled = true)开启方法级权限校验，接口代码参考：

   @RestController
   public class GreetController {
     @GetMapping("/greet")
     @PreAuthorize("hasRole('user')")
     public String greet() {
       return "接口访问成功，当前用户拥有user权限";
     }
   }
   

联调验证按顺序走：先确认Keycloak服务本身可正常访问，再测前端能不能正常跳转登录、拿到有效token，再把token复制到Postman直接调后端接口，确认后端权限校验逻辑正常，最后再联调前端请求，不要一开始就全链路跑，出问题很难定位。

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