PWA离线时无法连接局域网HTTPS本地服务器的问题求助

问题根因 #

• 自签名证书默认仅在生成证书的服务器设备上被信任，同局域网其他设备未导入根证书时会直接拦截HTTPS请求，PWA要求安全上下文，会直接拒绝未信任的HTTPS连接
• 服务器设备防火墙拦截了服务端口的入站请求，或服务本身绑定的是127.0.0.1本地回环地址，未绑定局域网网段IP
• Heroku部署的PWA配置的内容安全策略（CSP）未将本地服务器局域网IP加入允许的请求源列表

分步解决流程 #

1. 网络连通性排查 #

• 确认本地服务启动时绑定地址为0.0.0.0或对应局域网IP，而非127.0.0.1，绑定回环地址时仅本机可访问
• 关闭服务器设备对应端口的入站防火墙限制，或手动添加规则放行服务运行端口
• 先在同局域网其他设备通过浏览器直接访问https://<局域网IP>:<端口>，若提示连接超时为网络问题，若提示证书不安全为证书信任问题

2. 自签名证书适配 #

• 生成自签名证书时必须将局域网IP加入证书的**使用者备用名称（SAN）**字段，仅填写Common Name的证书会被现代浏览器判定为无效
• 导出证书对应的根CA证书，安装到所有需要访问服务的局域网设备的「受信任的根证书颁发机构」存储区，移动端需在系统安全设置中导入并开启信任
• 证书配置完成后再次用浏览器访问服务地址，确认地址栏无安全警告后再测试PWA连接

3. PWA规则适配 #

• 若使用Service Worker做请求代理，需在Service Worker逻辑中添加本地服务器IP的请求允许规则，不要拦截或降级该类请求
• 更新Heroku上PWA的响应头CSP配置，将https://<局域网IP>:<端口>加入connect-src指令的允许列表，避免跨源请求被拦截

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