Web应用集成Keycloak时的重定向错误与连接问题排查

问题描述 #

开发的Web应用通过Keycloak实现登录认证，点击登录后Keycloak页面正常显示，但提交用户名密码后，重定向URL丢失了端口8080和/auth前缀，错误重定向到：

http://localhost/realms/Cortex/login-actions/authenticate?session_code=yIxXZQKv0gqpqo6QkQDcTiq5ZR2HQrBxfXL_UFet9Lw&execution=02581d40-d3d9-48ec-a215-ca355eb3117b&client_id=cortex&tab_id=-V4Y2bvwv3o&client_data=eyJydSI6Imh0dHA6Ly9sb2NhbGhvc3Q6ODA4MC8jLyIsInJ0IjoiY29kZSIsInJtIjoiZnJhZ21lbnQiLCJzdCI6ImRkYWFjNTdmLWIyZjctNDkyNS05MDI0LTgxNGE0MTg2ZWY3NyJ9c58-31bc-45f1-90b2-619f216bef2a&code_challenge=qQdh7Rc9iApx5EmKuV427qPEnT8D5K6ZwCYHfT6wFew&code_challenge_method=S256

而非预期的：

http://localhost:8080/auth/realms/Cortex/protocol/openid-connect/auth?client_id=cortex&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2F%23%2F&state=ddaac57f-b2f7-4925-9024-814a4186ef77&response_mode=fragment&response_type=code&scope=openid&nonce=e4bff

解决方案 #

1. 修复Nginx的Keycloak代理配置 #

原Nginx配置中location /auth的proxy_pass路径错误，导致Keycloak无法正确识别请求路径；同时需确保Host头包含端口信息。修改后的配置如下：

# Proxy for Keycloak (Auth)
location /auth {
    proxy_pass http://keycloak_auth:8080/auth;  # 保持/auth路径一致，避免丢失前缀
    proxy_set_header Host $host:$server_port;  # 传递完整的主机和端口
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, DELETE, PUT';
    add_header Access-Control-Allow-Headers 'Authorization, Content-Type';
}

• 核心修改：proxy_pass调整为与外部路径匹配的http://keycloak_auth:8080/auth，确保请求路径完整传递；Host头添加$server_port，让Keycloak感知外部访问端口。

2. 修正Keycloak容器的环境变量 #

开启代理地址转发，确保Keycloak使用反向代理传递的头部生成正确的外部URL。修改Docker-Compose中keycloak服务的环境变量：

keycloak:
    image: quay.io/keycloak/keycloak:latest
    container_name: keycloak_auth
    command: start-dev
    ports:
      - "8001:8080"
    environment:
      - KEYCLOAK_ADMIN=admin
      - KEYCLOAK_ADMIN_PASSWORD=admin
      - DB_VENDOR=postgres
      - DB_ADDR=keycloak-db
      - DB_DATABASE=keycloak
      - DB_USER=keycloak
      - DB_PASSWORD=keycloak
      - KEYCLOAK_FRONTEND_URL=http://localhost:8080/auth/
      - PROXY_ADDRESS_FORWARDING=true  # 信任反向代理头部，生成正确的外部URL
    networks:
      - app_network
    depends_on:
      - keycloak-db
    volumes:
      - keycloak_data:/opt/keycloak/data

• 新增PROXY_ADDRESS_FORWARDING=true：让Keycloak基于反向代理传递的X-Forwarded-*头生成外部访问URL，而非容器内部地址。

3. 检查Keycloak客户端配置 #

登录Keycloak管理后台（http://localhost:8080/auth/admin），找到cortex客户端：

• Valid Redirect URIs：设置为http://localhost:8080/*，确保所有前端回调请求被允许。
• Web Origins：设置为http://localhost:8080，允许前端跨域请求Keycloak接口。
• 确认客户端Access Type为public（适配Vue这类前端单页应用）。

验证步骤 #

1. 重启相关容器：

docker-compose restart proxy keycloak

2. 清除浏览器缓存，重新测试登录流程，确认提交后重定向URL包含localhost:8080/auth前缀。

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