React应用部署到Netlify后调用HTTP后端报Mixed Content错误该如何解决？

这是浏览器的标准安全策略：HTTPS协议加载的站点不允许主动发起HTTP协议的接口请求，避免明文传输泄露敏感数据，所以请求被直接拦截。本地开发环境因为一般走HTTP或者本地调试权限宽松，所以不会触发该限制。

可行解决办法按优先级排序如下：

• 优先方案：为后端服务配置HTTPS证书
  可以申请免费的Let's Encrypt等SSL证书部署到你的后端服务器，部署完成后将前端的API请求地址统一替换为HTTPS开头的地址，例：https://31.64.97.124/apiusers（如果后端绑定了域名优先用域名）。该方案无任何副作用，是生产环境的标准选择。
• 临时过渡方案：使用Netlify反向代理转发请求
  如果你暂时无法为后端配置HTTPS，可以借助Netlify的重定向功能做服务端转发：
  1. 在React项目的public目录下新建名为_redirects的文件（无文件后缀）
  2. 在文件中添加规则：/apiusers/* http://31.64.97.124/apiusers/:splat 200
  3. 将前端所有API请求的前缀改为相对路径/apiusers即可。
     该方案下请求会先发到Netlify的同域名HTTPS接口，再由Netlify服务端转发到你的后端HTTP接口，浏览器侧不会感知到HTTP请求，因此不会触发混合内容拦截，同时还可以解决后端的跨域问题。
• 临时调试方案：修改浏览器安全设置（仅个人调试用，不可用于生产）
  你可以手动修改当前站点的浏览器权限，允许加载不安全内容：点击浏览器地址栏左侧的站点信息图标 -> 站点设置 -> 找到「不安全内容」选项，设置为「允许」即可。该方案仅对当前你自己的浏览器生效，普通用户访问站点还是会触发报错，因此仅适合临时调试使用。

注意：你提问里出现了两个不一致的后端IP 31.64.97.124 和 34.68.97.184，配置时请替换为你实际的后端接口地址。

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