Angular项目Chrome访问localhost:4200报ERR_CONNECTION_REFUSED的原因及原理

为什么Chrome无法访问但FireFox正常？ #

• 浏览器本地安全策略缓存机制独立：Chrome会单独缓存localhost的HSTS（HTTP严格传输安全）规则，如果之前你尝试过用HTTPS访问localhost:4200（比如临时配置过HTTPS开发服务器、手动修改过地址协议），Chrome会强制后续所有请求都用HTTPS。但Angular默认开发服务器只监听HTTP的4200端口，没有HTTPS服务，因此触发ERR_CONNECTION_REFUSED。而Firefox的HSTS缓存是独立管理的，没有留下这个强制HTTPS的记录，所以能正常发起HTTP请求。
• 连接状态缓存差异：Chrome对失败的连接会保留短时间的缓存标记，比如某次访问localhost:4200失败后，Chrome可能直接复用这个失败状态，跳过重新连接的步骤；而Firefox的连接池没有这类残留标记，能重新尝试建立新连接。

删除Chrome中localhost的域名安全策略后恢复正常的原理是什么？ #

Chrome里的「Delete domain security policies」操作，核心是清除针对localhost的HSTS策略缓存。当localhost被加入HSTS列表后，Chrome会强制所有对该域名的请求使用HTTPS——哪怕你输入的是HTTP地址。而Angular开发服务器默认只提供HTTP服务，4200端口并没有监听HTTPS请求，因此Chrome发送的HTTPS请求会被直接拒绝。

删除该安全策略后，Chrome不再强制HTTPS访问localhost，会按照正常的HTTP协议发起请求，自然就能连接到Angular的开发服务器。至于需要多次操作才生效，大概率是Chrome的缓存存在多层级，第一次清除没彻底删掉残留的HSTS规则，多次操作后才完全清理干净。

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