如何用Nginx在同域名下部署React与Django并解决混合内容问题？

问题核心 #

你遇到的Blocked loading mixed active content错误，根源是HTTPS协议的前端页面直接发起了HTTP协议的后端请求，浏览器安全策略拦截了这类混合内容请求。你的Nginx配置已经为后端设置了/api路径代理，但前端尚未通过该代理路径发起请求。

解决方案 #

1. 修改React前端的API请求地址 #

将前端代码中所有指向后端的绝对HTTP地址（比如http://localhost:8000/api/xxx），改为相对路径/api/xxx，或者通过环境变量统一配置：

• 在React项目的.env文件中添加：

  REACT_APP_API_BASE_URL=/api
  

• 所有API请求基于该变量拼接路径，示例：

  fetch(`${process.env.REACT_APP_API_BASE_URL}/users`)
    .then(res => res.json())
    // ...后续逻辑
  

• 重新构建前端应用（npm run build）并部署到服务器。

2. 优化Nginx代理配置 #

检查/api路径的代理规则，确保请求路径正确传递给后端：

• 如果Django后端的API路由从根路径（比如/users）开始，需在proxy_pass末尾添加斜杠，自动去掉/api前缀：

  location /api {
      proxy_pass http://localhost:8000/;  # 末尾加斜杠
      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;
  }
  

• 如果Django后端的API路由本身以/api开头（比如/api/users），保持原proxy_pass http://localhost:8000即可。

3. 生效Nginx配置并验证 #

• 测试配置语法：sudo nginx -t
• 重新加载配置：sudo systemctl reload nginx
• 打开浏览器开发者工具（F12），切换到「网络」标签，确认API请求地址为https://camfire.pp.ua/api/xxx，而非HTTP协议地址。

4. 配置Django识别HTTPS请求 #

为避免后端生成HTTP格式的链接，在Django的settings.py中添加：

SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
USE_X_FORWARDED_HOST = True

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