React集成Keycloak时login-status-iframe.html报403 Forbidden错误

问题背景 #

React应用运行在3000端口，Keycloak运行在8080端口，集成身份认证时触发403禁止访问错误。

相关代码与配置 #

Keycloak.ts代码 #

import Keycloak from 'keycloak-js';
const keycloak = Keycloak({
  url: 'http://localhost:8080/auth',
  realm: "keycloak-react-auth",
  clientId: "react",
});

export default keycloak;

index.ts代码 #

import keycloak from './keycloak'
import AppRouter from './routes/index'
import { ReactKeycloakProvider } from '@react-keycloak/web'

const eventLogger = (event: unknown, error: unknown) => {
  console.log('onKeycloakEvent', event, error)
}

const tokenLogger = (tokens: unknown) => {
  console.log('onKeycloakTokens', tokens)
}

ReactDOM.render(
  <React.StrictMode>
    <ReactKeycloakProvider
      authClient={keycloak}
      onEvent={eventLogger}
      onTokens={tokenLogger}
    >
      <div style={{margin: '0px', padding: '0px', width: '100%', height: '100%'}}>
        <AppRouter />
      </div>
    </ReactKeycloakProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

环境版本信息 #

• Keycloak版本：通过docker pull jboss/keycloak:latest获取的最新版本
• React依赖版本：
  • keycloak-js: ^20.0.3
  • @react-keycloak/web: ^3.4.0

配置与错误说明 #

• Keycloak客户端配置：客户端访问类型为public，有效重定向URI设置为http://localhost:3000/*
• 403错误表现：请求http://localhost:8080/auth/realms/keycloak-react-auth/protocol/openid-connect/token时返回403状态码

排查与解决步骤 #

1. 修正Keycloak端点路径（重点排查） #

Keycloak 17+版本（Quarkus重构版）已移除/auth路径，如果你拉取的最新版本是21+，需要修改初始化URL：

const keycloak = Keycloak({
  url: 'http://localhost:8080', // 去掉末尾的/auth
  realm: "keycloak-react-auth",
  clientId: "react",
});

旧路径/auth在新版本中已失效，直接请求会触发403。

2. 确认Web Origins跨域配置 #

在Keycloak客户端配置的Web Origins中添加http://localhost:3000，开发环境可临时设置为*（生产环境需指定具体域名），避免跨域请求被拦截导致403。

3. 检查用户角色映射 #

确保登录用户已被分配该客户端的角色：

• 进入Keycloak控制台→用户→选择对应用户→角色映射
• 添加default-roles-keycloak-react-auth或该客户端自定义角色，无权限用户会被拒绝访问。

4. 验证版本兼容性 #

@react-keycloak/web@3.4.0兼容Keycloak 11-20版本，如果你使用的是Keycloak 21+，建议：

• 降级Keycloak到20.x版本（如docker pull jboss/keycloak:20.0.3）
• 或升级@react-keycloak/web到适配新版本的分支（如使用@react-keycloak/ssr替代，或查看官方兼容说明）

5. 确认有效重定向URI #

确保Keycloak客户端的有效重定向URI包含http://localhost:3000/*，格式错误或遗漏会导致授权流程中重定向被拦截，触发403。

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