带HTTP协议的API URL生产环境失效，HTTPS调用崩溃如何解决？

你遇到的是典型的混合内容拦截问题：浏览器出于安全限制，禁止HTTPS页面发起HTTP请求。你添加的<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />之所以无效，是因为这个指令会强制把所有HTTP请求升级为HTTPS，但目标API本身不支持HTTPS，升级后的请求自然会失败。

最适合你的解决方案是使用Netlify自带的代理转发功能，让Netlify作为中间层处理HTTP请求，避免浏览器直接发起不安全的请求：

1. 在项目根目录创建netlify.toml配置文件
2. 写入以下代理规则：

   [[redirects]]
     from = "/api/*"
     to = "http://challenge-react.alkemy.org/:splat"
     status = 200
     force = true
   

   这里的:splat会匹配/api/后面的所有路径，保证所有API接口都能正确转发。
3. 修改代码中的API请求地址：把原来的http://challenge-react.alkemy.org/替换成/api/。比如原来请求http://challenge-react.alkemy.org/login，就改成/api/login。
4. 重新部署项目到Netlify

这个方案的原理是：浏览器只会向Netlify的HTTPS服务器发起请求，Netlify再以HTTP方式转发到目标API，既绕开了混合内容限制，又能正常调用仅支持HTTP的API。

如果是本地开发环境，你可以额外配置项目的开发代理（比如React项目用setupProxy.js），保证本地和部署环境的请求地址一致，避免切换环境时修改代码。

内容的提问来源于stack exchange，提问作者Edelmiro Antón