React前端部署Netlify后调用HTTP接口遇混合内容错误求助

我搭建了React前端+Node.js API的应用，API部署在EC2实例上。本地运行前端一切正常，但部署到Netlify后出现以下错误：

index-3ecf22b0.js:121 Mixed Content: The page at 'https://fanciful-khapse-1438af.netlify.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://15.229.71.122:7070/sessions'. This request has been blocked; the content must be served over HTTPS.

尝试过在index.html添加upgrade-insecure-requests的CSP标签，但无效。修改前端API的baseURL为HTTPS时，出现404错误（请求发到了Netlify域名而非EC2地址），希望解决这个问题。

解决方案 #

• 核心结论：现代浏览器的安全策略禁止HTTPS页面发起HTTP请求，这是不可绕过的限制，必须让你的EC2 API支持HTTPS才能解决问题。
• 正确配置步骤：
  1. 给EC2实例绑定一个域名（无域名也可使用弹性IP配合免费证书，但绑定域名更规范）
  2. 给该域名申请SSL证书（推荐使用Let's Encrypt的免费证书）
  3. 配置HTTPS服务：
     • 方案一：直接在Node.js代码中配置HTTPS，加载证书文件启动服务
     • 方案二：用Nginx作为反向代理，由Nginx处理HTTPS请求并转发到Node.js的HTTP服务（更推荐，便于后续扩展和管理）
  4. 修改前端src/services/api.js中的baseURL为https://你的EC2域名:端口（若使用Nginx反向代理，通常无需端口，直接填写域名即可）
• 为什么upgrade-insecure-requests无效：这个标签的作用是让浏览器自动将HTTP请求升级为HTTPS，但前提是你的API已经部署了HTTPS服务。如果API本身没有HTTPS，升级后的请求会直接失败，因此无法解决你的问题。
• 临时测试方案（仅用于本地调试，不适合生产环境）：
  在Chrome浏览器中，点击地址栏的锁图标 → 选择「网站设置」 → 找到「不安全内容」选项，设置为「允许」。但这仅能让你自身访问时正常，其他用户访问依然会报错。

运行方式 #

克隆代码后，在前端文件夹执行：

npm install
npm run dev

本地可正常运行，部署到Netlify后需完成上述HTTPS配置才能正常调用API。

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