AWS Lightsail部署MERN站点HTTPS下图片不显示HTTP可正常加载求助

核心问题由两个部署配置错误叠加导致：一是HTTPS站点下加载HTTP资源触发浏览器混合内容拦截，二是前端硬编码了本地开发地址localhost，线上部署后该地址指向用户本地而非你的服务器。你在新标签页能通过HTTP打开图片，只是因为你本地运行着后端服务，其他用户访问时同样会加载失败。

具体修复步骤： #

• 第一步：修正前端资源引用的硬编码地址
  不要在代码里写死http://localhost:8000前缀，改为以下任意一种写法：

  1. 相对路径写法：<img src="/images/image_name.jpeg">，后续配合反向代理配置即可正确路由
  2. 协议相对路径写法：<img src="//<你的服务器公网IP/绑定域名>/images/image_name.jpeg">，会自动适配当前页面的HTTP/HTTPS协议

• 第二步：配置统一的HTTPS反向代理（推荐方案）
  在Lightsail实例上安装Nginx/Apache作为反向代理，统一处理所有对外请求：

  1. 给你的域名申请SSL证书（可使用Let's Encrypt免费证书），配置到Nginx的443端口
  2. 配置转发规则：前端页面请求转发到本地3000端口，/images前缀的请求转发到本地8000端口或者直接指向后端图片存储的本地目录
  3. 配置80端口的请求全部重定向到443端口，实现全站HTTPS
  4. 调整Lightsail防火墙规则，仅对外开发80/443端口，关闭3000、8000端口的公网访问，避免安全风险

• 第三步：临时替代方案（不推荐，仅用于快速验证）
  如果你暂时不想配置反向代理，可以直接给后端8000端口配置和前端同域名的SSL证书，开启HTTPS访问，之后将前端资源引用的前缀改为https://<你的服务器公网IP/绑定域名>:8000即可，注意要在Lightsail防火墙中开放8000端口的公网访问。

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