React部署Netlify后遇Mixed Content请求阻塞问题，求解决方案

核心原因 #

浏览器的混合内容安全策略会阻止HTTPS页面（如你的https://xyz.netlify.app/）发起HTTP协议的请求，你的API使用http://********:8091/api/v1是明文传输，因此被拦截。

具体解决办法 #

1. 给后端API配置HTTPS（推荐） #

这是最根本的解决方式：

• 给你的后端服务器配置SSL证书（可使用Let's Encrypt免费证书），让API接口通过https://********:8091/api/v1（或去掉端口，使用默认443端口）提供服务。
• 修改React项目中的BASE_URL为HTTPS地址：

  BASE_URL = "https://********:8091/api/v1";
  

• 重新部署React应用到Netlify。

2. 在Netlify配置代理转发（适合暂时无法给后端加HTTPS的情况） #

利用Netlify的代理功能，将前端请求转发到后端API，避免跨协议问题：

• 在React项目根目录创建netlify.toml文件，添加以下配置：

  [[redirects]]
    from = "/api/v1/*"
    to = "http://********:8091/api/v1/:splat"
    status = 200
    force = true
  

• 修改React项目中的BASE_URL为相对路径：

  BASE_URL = "/api/v1";
  

• 提交代码并重新部署到Netlify，此时前端请求会通过Netlify的HTTPS域名转发到后端HTTP接口，浏览器只会识别到HTTPS请求，不会触发混合内容拦截。

注意事项 #

• 如果后端服务器在本地或内网，Netlify的代理无法访问到，这种情况下必须给后端配置公网可访问的HTTPS地址。
• 不要尝试关闭浏览器的混合内容拦截（仅适合临时测试，生产环境绝对禁止），这会带来严重安全风险。

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