Chrome升级后localhost随机无法加载问题求助

问题原因 #

• Chrome 107版本收紧了localhost的安全验证策略，当本地服务未配置有效SSL证书时，会触发"连接不安全"提示，甚至偶发拦截连接导致"无网络连接"错误。
• macOS Ventura 13的网络安全配置（如防火墙、系统代理）与Chrome新策略存在兼容性冲突，加剧了连接不稳定的情况。
• 本地服务端口占用或进程异常可能导致偶发连接失败，但Firefox未受影响是因为其对localhost的安全校验逻辑更宽松。

解决办法 #

临时应急方案（快速恢复开发） #

• 在Chrome地址栏输入 chrome://flags/#allow-insecure-localhost，找到Allow invalid certificates for resources loaded from localhost选项，设置为Enabled，重启Chrome后即可跳过localhost的SSL证书验证。

长期规范解决方案（推荐） #

配置自签名SSL证书

1. 用OpenSSL生成自签名证书，终端执行命令：

   openssl req -x509 -out localhost.crt -keyout localhost.key \
     -newkey rsa:2048 -nodes -sha256 \
     -subj "/CN=localhost" -extensions EXT -config <( \
       printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
   

2. 安装证书到Mac系统钥匙串：双击生成的localhost.crt，选择添加到"登录"钥匙串；找到该证书后右键点击"显示简介"，在"信任"栏将"使用此证书时"设置为"始终信任"。
3. 修改本地开发服务配置（如Node.js、Webpack、Nginx等），启用HTTPS并指定上述localhost.crt和localhost.key文件。

重置Chrome网络配置

• 进入chrome://settings/reset，选择"重置设置"恢复默认状态，排除自定义代理、缓存或扩展导致的异常。

排查系统与服务稳定性

• 用lsof -i :8888命令检查端口8888的占用情况，确保仅你的开发服务在使用该端口。
• 检查macOS防火墙设置，添加Chrome到允许连接的应用列表，或临时关闭防火墙测试。
• 重启本地开发服务，确保进程无异常挂起。

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