部署在gh-pages的React应用HTTP请求被转为HTTPS请求的原因排查

问题根源 #

你之前添加的 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 会强制将页面中所有HTTP请求升级为HTTPS，这就是EC2的HTTP请求被自动转换、最终失败的直接原因。

可行的临时解决方法 #

1. 调整Content-Security-Policy（CSP）规则

移除原有的强制升级标签，替换为更精细的CSP配置，既解决字体的混合内容问题，又允许向EC2的HTTP地址发起请求：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src https: http:; connect-src https: http://你的EC2实例IP或域名;">

• font-src https: http:：允许加载HTTP和HTTPS来源的字体，避免之前的混合内容错误
• connect-src https: http://你的EC2实例IP或域名;：明确允许向EC2的HTTP地址发起请求，不会被强制升级为HTTPS

2. 搭建简单的HTTPS中转服务（适合生产环境临时使用）

如果不想调整CSP，可以搭建一个轻量的中转服务，将gh-pages的HTTPS请求转发到EC2的HTTP接口：

• 用Node.js写一个简单的Express服务，配置HTTPS（可使用Let's Encrypt免费证书），在服务中转发请求到EC2的HTTP地址
• 将中转服务部署到免费平台（比如Heroku、Vercel），之后gh-pages应用请求这个中转服务的HTTPS地址即可

3. 浏览器临时绕过（仅用于个人测试）

如果只是自己测试使用，可以在Chrome等浏览器中临时允许加载不安全内容：

• 点击地址栏左侧的「不安全」提示，选择「允许加载不安全内容」
• 注意：此方法仅适用于个人测试，不能要求普通用户操作

重要提醒 #

以上方法均为临时方案，最终必须为EC2实例配置HTTPS，比如通过Let's Encrypt申请免费SSL证书，在EC2的Web服务器（Nginx/Apache）中配置HTTPS，从根本上解决混合内容和请求转换的问题。

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