页面刷新触发nginx/1.22.1 502错误——Angular+Django+Keycloak认证异常

问题场景 #

• 技术栈：Angular前端、Django后端、Keycloak身份认证服务
• 登录流程正常，但刷新页面时，前端发起的Keycloak OIDC认证GET请求返回nginx/1.22.1的502 Bad Gateway错误
• 部署环境：Kubernetes（K8s）、Docker

异常请求详情 #

GET请求信息：
scheme：https
host：keycloak-hugo.snow.tb.rns.equant.com
filename：/realms/INSIDE_LAB_Tool/protocol/openid-connect/auth
client_id：angular-front
redirect_uri：http://localhost:4200/inventory/ipv4Subnet#iss=https://keycloak-hugo.snow.tb.rns.equant.com/realms/INSIDE_LAB_Tool
state：54aa267c-cea5-4544-a784-19f6c3b24417
response_mode：fragment
response_type：code
scope：openid
nonce：939a0363-f321-405e-af58-04fb1c649df1
地址：10.253.52.24:443
状态：502 Bad Gateway
HTTP版本：HTTP/2

响应头：
content-length：157
content-type：text/html
date：Mon, 15 Jan 2024 14:28:35 GMT
server：nginx/1.22.1
strict-transport-security：max-age=63072000
X-Firefox-Spdy：h2

请求头：
Accept：text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,/;q=0.8
Accept-Encoding：gzip, deflate, br
Accept-Language：fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Connection：keep-alive
Cookie：AUTH_SESSION_ID=f2c7e4bc-da84-41f9-a51b-f87c4a305d4c.keycloak-7bd97bc4cc-68s7j-64592; AUTH_SESSION_ID_LEGACY=f2c7e4bc-da84-41f9-a51b-f87c4a305d4c.keycloak-7bd97bc4cc-68s7j-64592; KEYCLOAK_IDENTITY=eyJhbGciOiJIUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICI0NTMzOTFkZC0xMDYzLTRmNWItOGNlYy0yMDQ3ZTBlYmYxZTYifQ.eyJleHAiOjE3MDUzNjQ4NDIsImlhdCI6MTcwNTMyODg0MiwianRpIjoiNGExYzdiMTEtYTc0ZC00NTNmLWFhZWEtYzdiNjIyMWRlYzQ2IiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay1odWdvLnNub3cudGIucm5zLmVxdWFudC5jb20vcmVhbG1zL0lOU0lERV9MQUJfVG9vbCIsInN1…R5cCI6IlNlcmlhbGl6ZWQtSUQiLCJzZXNzaW9uX3N0YXRlIjoiZjJjN2U0YmMtZGE4NC00MWY5LWE1MWItZjg3YzRhMzA1ZDRjIiwic2lkIjoiZjJjN2U0YmMtZGE4NC00MWY5LWE1MWItZjg3YzRhMzA1ZDRjIiwic3RhdGVfY2hlY2tlciI6IkpydGMxanhjMWNXWFBPQ1BkSlozUUNaZWFwZzBhTmtwdHBMMndqSnFaTjgifQ.hXvlLVYMw6OE5kh2-83yQMSHvaEPQX7M00bdKffiDuc; KEYCLOAK_SESSION=INSIDE_LAB_Tool/8f4160bd-db1d-45ba-aaca-e891cde8b8ba/f2c7e4bc-da84-41f9-a51b-f87c4a305d4c; KEYCLOAK_SESSION_LEGACY=INSIDE_LAB_Tool/8f4160bd-db1d-45ba-aaca-e891cde8b8ba/f2c7e4bc-da84-41f9-a51b-f87c4a305d4c
DNT：1
Host：keycloak-hugo.snow.tb.rns.equant.com
Referer：http://localhost:4200/
Sec-Fetch-Dest：document
Sec-Fetch-Mode：navigate
Sec-Fetch-Site：cross-site
TE：trailers
Upgrade-Insecure-Requests：1
User-Agent：Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

排查方向与解决方案 #

1. 检查Keycloak Pod状态 #

502通常是代理无法连接到后端服务，先确认Keycloak Pod是否正常运行：

kubectl get pods -n <你的命名空间>

如果Pod状态不是Running，重启异常Pod：

kubectl delete pod <keycloak-pod-name> -n <命名空间>

2. 验证K8s Service与Pod的关联 #

确认Keycloak对应的K8s Service能正确关联到可用Pod：

kubectl describe service <keycloak-service-name> -n <命名空间>

查看Endpoints字段，确保有活跃的Pod IP列表。如果为空，检查Pod的标签是否与Service的标签选择器匹配。

3. 检查Nginx代理配置 #

Nginx作为Keycloak的入口代理，可能存在转发配置问题：

• 确认Nginx配置中转发到Keycloak的地址是K8s Service域名（如keycloak-service.<命名空间>.svc.cluster.local），而非固定IP（Pod IP会变化）
• 增加代理超时配置，避免因Keycloak响应慢导致502：

  location / {
      proxy_pass http://keycloak-service;
      proxy_connect_timeout 30s;
      proxy_read_timeout 30s;
      proxy_send_timeout 30s;
  }
  

• 检查路径重写规则，确保/realms/INSIDE_LAB_Tool/protocol/openid-connect/auth路径未被错误重写。

4. 校验Keycloak客户端Redirect URI配置 #

在Keycloak控制台中，进入INSIDE_LAB_Tool realm → Clients → angular-front，检查Valid Redirect URIs是否包含：

• http://localhost:4200/*
• 或更具体的http://localhost:4200/inventory/ipv4Subnet*
  确保带#的URI也被允许（Keycloak支持通配符匹配）。

5. 调整Angular路由与Keycloak初始化配置 #

如果使用Angular Hash模式路由，可能导致Redirect URI包含额外片段，可尝试：

• 切换为PathLocationStrategy（需要Django后端配置支持SPA路由，比如所有非API请求转发到index.html）
• 确认Angular的Keycloak初始化代码中redirectUri设置正确，避免刷新时生成异常URI：

  initializeKeycloak() {
    this.keycloakService.init({
      config: {
        url: 'https://keycloak-hugo.snow.tb.rns.equant.com',
        realm: 'INSIDE_LAB_Tool',
        clientId: 'angular-front'
      },
      initOptions: {
        redirectUri: window.location.origin + '/inventory/ipv4Subnet',
        onLoad: 'check-sso'
      }
    });
  }
  

6. 查看日志定位根因 #

从Nginx和Keycloak日志中获取具体错误信息：

# 查看Nginx日志
kubectl logs <nginx-pod-name> -n <命名空间>
# 查看Keycloak日志
kubectl logs <keycloak-pod-name> -n <命名空间>

日志通常会显示转发失败的具体原因（如连接超时、DNS解析失败等）。

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