部署在Vercel的React应用调用HTTP后端出现混合内容错误的解决方法

浏览器拦截请求是因为混合内容安全策略：HTTPS页面不允许发起HTTP协议的API请求，这是浏览器的强制安全限制。下面是可行的解决办法：

一、推荐方案：给后端配置HTTPS（生产环境必选） #

这是彻底解决问题的标准方式，步骤如下：

1. 给你的VPS域名myendpoint.org申请SSL证书，推荐用免费的Let's Encrypt证书，通过certbot工具可一键生成配置。
2. 配置反向代理（比如Nginx），把后端3001端口的服务通过HTTPS（443端口）对外暴露：
   示例Nginx配置片段：

   server {
       listen 443 ssl;
       server_name myendpoint.org;
   
       ssl_certificate /etc/letsencrypt/live/myendpoint.org/fullchain.pem;
       ssl_certificate_key /etc/letsencrypt/live/myendpoint.org/privkey.pem;
   
       location / {
           proxy_pass http://localhost:3001;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }
   

3. 重启Nginx后，前端将API请求地址改为https://myendpoint.org/user/login即可正常调用。

二、临时替代方案（仅开发/测试环境使用） #

如果暂时无法给后端配置HTTPS，可使用以下临时方案，但严禁在生产环境使用：

1. 单个浏览器临时放行混合内容 #

在Chrome地址栏点击左侧锁图标 → 选择「网站设置」 → 找到「不安全内容」选项，改为「允许」，刷新页面后即可发起请求。但此设置仅对当前浏览器生效，其他用户访问仍会被拦截。

2. 借助Vercel反向代理转发请求 #

在前端项目根目录创建vercel.json文件，配置路径重写规则，让Vercel转发API请求到后端HTTP地址：

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "http://myendpoint.org:3001/:path*"
    }
  ]
}

之后前端将请求地址改为同域的/api/user/login，Vercel会自动将请求转发到后端，规避混合内容限制。

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