Angular 11 PWA本地跨设备访问出现502 Bad Gateway错误排查

核心问题分析 #

502错误来自Microsoft-Azure-Application-Gateway/v2，说明请求已到达Azure网关，但网关无法将请求转发至后端服务。本地访问正常、跨设备异常的差异点在于请求的发起上下文（IP、Host头）不同，以下是具体排查方向：

1. 代理请求的Host头不匹配 #

http-server的--proxy参数默认会将无法匹配本地静态文件的请求转发到目标域名，但不会修改请求的Host头。局域网设备访问时，转发到Azure网关的请求Host头会被设置为你的笔记本局域网IP（如192.168.x.x:8282），而Azure网关的后端池通常只绑定原业务域名（xxxxxxx.com）的Host规则，导致网关无法识别目标后端，返回502。

解决方法：
在http-server启动命令中添加--proxy-header参数，强制设置转发请求的Host头为目标域名：

http-server -p 8282 -c-1 dist -S -C dist/cert.pem -K dist/key.pem --proxy https://xxxxxxx.com --proxy-header "Host: xxxxxxx.com" --log-ip

2. PWA服务工作者的路由/缓存干扰 #

虽然本地访问正常，但局域网设备首次加载时，服务工作者可能未完成注册，或缓存策略导致请求转发异常：

• 临时禁用PWA：移除index.html中注册service-worker的代码，测试局域网设备访问是否正常。如果恢复正常，再调整ngsw-config.json配置：
  • 确认dataGroups中的urls: ["/api"]是否准确匹配后端API路径，避免误拦截非API请求。
  • 若API请求带查询参数，可在cacheConfig中添加"ignoreSearch": true，确保请求能正确转发。
• 在局域网设备的浏览器开发者工具中，进入Application -> Service Workers，勾选Bypass for network后刷新页面，排查是否为缓存导致的问题。

3. Azure网关的访问控制限制 #

Azure应用网关可能配置了源IP白名单，仅允许你的笔记本本地IP（如127.0.0.1或公网IP）访问，而局域网设备的IP不在允许列表内，导致网关拒绝转发请求，返回502。

解决方法：
联系运维人员检查Azure应用网关的访问控制列表（ACL）或后端池的安全规则，确认是否允许你的局域网IP段（如192.168.0.0/24）访问。

4. 跨设备请求的认证上下文问题 #

本地访问时浏览器可能保留了认证Cookie/Token，但局域网设备是全新会话，认证校验请求可能缺少必要的认证信息，导致后端服务异常，网关转发时返回502（这种情况更常见返回4xx，但需排查）：

• 打开局域网设备的浏览器开发者工具，查看Network面板，定位返回502的具体请求（是/api接口请求还是登录页跳转请求）。
• 检查该请求的请求头，确认Authorization、Host等关键头是否正确。

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