网站添加SSL后出现混合活动内容报错如何处理

浏览器默认启用混合内容安全拦截：HTTPS加密上下文下会直接阻断所有明文HTTP请求，防止传输内容被窃听篡改，这是添加SSL证书后接口被拦截的核心原因，和React、Express框架本身无关，不需要调整后端协议，基于现有Nginx做反向代理即可解决。

1. 调整前端接口请求路径 #

把React项目里写死的HTTP全路径后端地址，统一改为相对路径前缀，所有接口统一以/api开头：

• 如果使用axios作为请求库，直接将baseURL设置为/api即可，不需要写域名和协议
• 原请求示例http://backend-ip:3000/user/info，直接改为/api/user/info
• 本地开发阶段可直接在React项目配置中添加proxy规则转发到本地后端，不影响日常调试

2. 修改Nginx配置 #

在已经配置好SSL证书的前端HTTPS服务块中，新增/api路径的反向代理规则：Nginx接收前端发起的HTTPS接口请求后，自动在内网转发给后端的HTTP服务，对浏览器而言全程走HTTPS协议，不会触发拦截。
参考配置如下：

server {
    listen 443 ssl;
    server_name 你的前端访问域名;
    # 原有SSL证书配置保持不变
    ssl_certificate 你的SSL证书文件路径;
    ssl_certificate_key 你的SSL证书私钥路径;

    # 原有React静态资源配置保持不变
    root /path/to/react/build产物目录;
    index index.html;

    # 新增接口反向代理规则
    location /api/ {
        # 转发到后端实际HTTP服务地址，同机部署直接填127.0.0.1加后端监听端口即可
        proxy_pass http://127.0.0.1:3000/;
        # 透传客户端真实请求信息给后端
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 原有前端路由兜底配置，解决React Router刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }
}

注意：proxy_pass地址末尾的/不能省略，否则转发时会把/api前缀一并传给后端，导致接口路径匹配失败返回404。

3. 重载Nginx配置生效 #

配置修改完成后，先执行命令校验配置合法性：
nginx -t
返回配置校验成功提示后，执行重载命令让配置生效：
nginx -s reload

• 全程不需要修改Express后端的任何代码，也不需要给后端配置SSL证书，如果前后端部署在同一台服务器，Nginx和后端之间走本地回环HTTP通信，不存在公网明文传输的安全风险
• 不要尝试通过修改浏览器安全设置、前端插入特殊meta标签的方式绕过混合内容拦截，这类方案只适用于本地临时调试，普通用户访问时不会修改本地浏览器配置，完全无法落地
• 如果后端服务和Nginx不在同一台服务器，只需要把proxy_pass后的地址替换为后端可访问的HTTP地址即可，注意不要把后端的HTTP端口直接暴露到公网，避免未授权访问。

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