Netlify部署的React应用向Elastic Beanstalk发POST请求的HTTPS问题求助

以下方案按实现复杂度从低到高排序，可按需选择：

方案1：利用Netlify代理绕过浏览器混合内容限制（无需修改后端/无需配置HTTPS） #

你遇到的Netlify站点无法请求HTTP接口的限制本质是浏览器的混合内容安全策略：HTTPS页面默认禁止向HTTP端点发起请求，并非Netlify平台主动拦截。可以通过Netlify自带的代理转发功能规避：

1. 在React项目的public目录下新建名为_redirects的无后缀文件
2. 文件内添加如下内容：

/api/* http://XXXXXX.elasticbeanstalk.com/:splat 200

3. 前端代码中所有请求后端的接口路径统一改为/api/实际接口路径，比如原来请求http://XXXXXX.elasticbeanstalk.com/getData，现在改为请求/api/getData
4. 重新部署到Netlify即可生效，浏览器会认为你请求的是同域HTTPS接口，不会再拦截

方案2：为Elastic Beanstalk配置受信任的HTTPS证书 #

你之前配置失败的核心原因是未使用自有域名申请证书，elasticbeanstalk.com域名归属AWS，你确实无法为它申请公认可信的证书，使用自有域名配置即可：

1. 进入AWS Certificate Manager（ACM）控制台，申请免费SSL证书，绑定域名填写你自己的api.myname.com（可自定义前缀），验证方式选择DNS验证
2. 按ACM给出的提示，到你的域名解析服务商后台添加对应的TXT解析记录，完成域名所有权验证后证书会自动签发
3. 进入Elastic Beanstalk环境的配置页面，找到负载均衡的监听器配置，新增HTTPS 443监听器，证书选择刚申请的ACM证书
4. 回到域名解析后台，添加CNAME记录，将api.myname.com指向你的EB默认地址XXXXXX.elasticbeanstalk.com
5. 前端直接请求https://api.myname.com/接口路径即可，该证书为公共可信证书，不会被Netlify拦截

方案3：更换无需HTTPS配置的前端托管平台 #

如果仅做临时测试，对访问安全性无要求，可以选择支持HTTP访问的静态托管平台，无需处理任何证书相关配置：

• 云服务商对象存储：阿里云OSS、腾讯云COS开通静态网站托管功能后，默认支持HTTP访问，直接上传React打包后的build目录文件即可
• 低配云服务器：自行租赁入门级云服务器，安装Nginx后将打包文件放入对应目录，直接用服务器IP的HTTP地址访问即可
• 代码托管平台静态页服务：部分国内代码托管平台的Pages服务支持HTTP访问，上传代码后自动构建部署，无需额外配置

内容的提问来源于stack exchange，提问作者JESTER 2-6