Vue.js调用Keycloak获取用户接口报401 Unauthorized错误如何解决

核心问题排查&修正步骤 #

• 删掉请求配置中的mode: 'no-cors'参数：no-cors模式下浏览器会自动屏蔽自定义的Authorization请求头，导致认证信息无法正常传递，这是触发401的最常见原因。
• 修正接口请求路径：admin-cli是Keycloak的默认客户端ID，不是realm名称，你需要获取哪个realm下的用户，路径中realm参数就填对应realm的名称。如果使用Keycloak 17及以上版本，默认访问路径已移除/auth前缀，对应路径要改为http://localhost:8081/admin/realms/test-realms/users。
• 分配接口调用权限：当前登录Keycloak的账号需要拥有对应realm的view-users权限，配置路径为：Keycloak管理后台 → 对应realm → 用户/客户端角色配置 → 分配realm管理角色下的view-users权限。
• 配置跨域规则：在Keycloak管理后台找到你Vue项目使用的客户端，将「Web Origins」配置为你的Vue项目访问地址（测试阶段可填*临时放行所有跨域请求）。

修正后代码示例 #

var myHeaders = new Headers();
myHeaders.append('Authorization', `Bearer ${Vue.prototype.$keycloak.token}`);
myHeaders.append('Accept', 'application/json');
var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};
// 注意根据Keycloak版本调整是否保留/auth前缀
fetch('http://localhost:8081/auth/admin/realms/test-realms/users', requestOptions)
  .then(res => res.json())
  .then(userList => console.log(userList))
  .catch(err => console.error(err))

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