使用Nginx代理后端请求时如何修复混合内容错误？

问题原因 #

混合内容错误的本质是浏览器加载HTTPS页面时，页面中存在HTTP协议的请求或资源引用。虽然你通过https://<my-server-name>/server/...发起请求，但可能是以下情况导致：

• 前端代码硬编码了HTTP协议的后端地址（比如http://<my-server-name>/server/xxx），而非相对路径或HTTPS地址
• 后端返回的响应数据中包含HTTP协议的资源链接（如接口返回的图片URL为http://xxx）
• 后端未识别到前端的HTTPS请求，处理时重定向到了HTTP地址
• Nginx反向代理未传递正确的协议头，导致后端误以为请求是HTTP，进而返回带HTTP的内容

修复步骤 #

1. 修正前端请求地址 #

检查前端代码中所有请求后端的地址，统一使用相对路径（如/server/api/xxx）或HTTPS绝对路径（https://<my-server-name>/server/xxx），禁止硬编码HTTP协议地址。

2. 完善Nginx代理头配置 #

在location /server/块中添加X-Forwarded-Proto头，告知后端当前请求的协议是HTTPS：

location /server/ {
    proxy_pass http://127.0.0.1:8000/;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Proto $scheme; # 关键：传递HTTPS协议标识
    proxy_set_header X-Forwarded-For $remote_addr; # 可选：传递客户端真实IP
    proxy_cache_bypass $http_upgrade;
}

同时确保后端服务已配置信任该代理头（比如后端框架的trust proxy设置），让后端根据该头生成正确的HTTPS链接。

3. 检查后端响应内容 #

如果后端接口返回的内容包含URL（如图片、文件地址），确保这些URL使用HTTPS协议或相对路径。若后端根据请求协议生成链接，步骤2的配置会让后端自动生成HTTPS链接。

4. 确保后端仅本地访问 #

确认后端服务监听地址为127.0.0.1:8000，而非0.0.0.0:8000，避免对外暴露后端服务。

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