Vue3部署Firebase后Chrome无法加载图片问题咨询

核心原因 #

• HTTPS与HTTP混合内容限制
  Firebase Hosting部署的站点默认使用HTTPS协议，而你的VPS头像资源是无SSL证书的HTTP链接。Chrome目前严格执行安全策略，会主动阻止HTTPS页面加载非安全的HTTP资源，直接拒绝建立连接，因此抛出net::ERR_CONNECTION_REFUSED错误。

• 浏览器安全策略差异
  Safari对混合内容的限制程度低于Chrome，默认允许加载图像这类被动资源，所以仍能正常显示头像。

额外排查方向 #

• VPS防火墙/安全组拦截：本地能访问是因为你的IP在允许列表，但部署后请求来自Firebase的服务器IP，可能被VPS的防火墙拦截，导致连接失败。
• 资源路径错误：确认部署后的头像链接是否正确，是否存在绝对路径/相对路径转换的问题（不过本地正常的话这个概率较低）。

解决办法 #

• 给VPS配置SSL证书：将头像资源的链接改为HTTPS，彻底解决混合内容的安全限制，这是生产环境的最优方案。
• 临时测试调整Chrome设置（仅用于调试）：在Chrome地址栏输入chrome://flags/#allow-insecure-localhost，开启允许不安全内容，但此方法不适合生产环境。
• 调整VPS防火墙规则：添加Firebase服务器IP段的访问权限，确保Firebase能正常请求VPS上的头像资源。

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