React部署在AWS S3上，如何单独让某页面通过HTTP而非HTTPS访问以解决直播流混合内容错误

嘿，我来帮你梳理下这个问题——其实你想单独让某个页面走HTTP的思路，在S3静态网站的架构下是行不通的，我来给你拆解原因，再给几个可行的替代方案：

先说说为什么“单个页面走HTTP”不可行 #

• S3静态网站托管（不管是用S3自带的域名还是绑定自定义域名），协议是全站统一的：要么整个站点用HTTP，要么通过CloudFront配置HTTPS，没办法针对单个页面设置不同的访问协议。
• 退一步说，就算你强行引导用户通过HTTP访问那个页面，现在主流浏览器都会弹出强烈的安全警告，甚至直接阻止页面加载，这完全不是生产环境能接受的用户体验。

为什么你之前试的package.json proxy没用？ #

你配置的开发环境代理是create-react-app用来在本地开发时转发请求的工具，生产环境下React打包成静态文件部署到S3后，这个配置根本不会生效——因为S3只是个静态文件存储服务，没有后端服务来处理代理逻辑。

靠谱的解决方案（按优先级排序） #

1. 优先让流提供者升级到HTTPS
   这是最彻底、最符合Web安全标准的解决办法。混合内容错误的根源就是HTTPS页面加载HTTP资源，让直播流的托管方把M3U8链接换成HTTPS版本，问题直接迎刃而解。

2. 用反向代理把HTTP流转成HTTPS
   如果没法说服流提供者修改，那就自己搭个代理，把HTTP的流包装成HTTPS资源，这样页面依然用HTTPS访问，就不会触发混合内容限制了。推荐用AWS CloudFront来做，步骤很简单：

   • 新建一个CloudFront分发，将源站地址设置为那个HTTP的直播流服务器地址
   • 用AWS Certificate Manager免费申请一份HTTPS证书，绑定到CloudFront分发上
   • 在你的React页面里，把原来的HTTP流地址替换成CloudFront分发的HTTPS地址
     这样浏览器会认为你加载的是HTTPS资源，实际CloudFront会帮你去拉取HTTP的流再返回给浏览器，完美绕过限制。如果你不想用CloudFront，也可以用EC2搭个简单的Nginx代理，配置HTTPS证书后转发请求到HTTP流地址。

3. 临时测试方案：修改浏览器混合内容设置
   如果你只是本地测试用，可以临时关闭浏览器的混合内容阻止，但绝对不能用于生产环境——因为每个用户都需要手动修改设置，而且现代浏览器默认严格阻止这类行为。比如Chrome里可以点击地址栏的锁图标→站点设置→不安全内容，改成“允许”，但这只是临时的测试手段。

备注：内容来源于stack exchange，提问作者Sahil Manchanda