HTTPS网站调用HTTP API遇混合内容错误的解决方法及Django配置指引

前端可行方案？没有 #

浏览器的混合内容安全策略是强制限制，当页面通过HTTPS加载时，不允许发起HTTP的API请求，没有合法的前端绕过方案——任何尝试通过前端修改配置或脚本绕过的方法要么无效，要么会引入严重安全风险，浏览器会直接拦截这类请求。因此必须给Django后端配置HTTPS。

DigitalOcean Droplets上Docker Compose部署的Django配置HTTPS步骤 #

以下是针对Docker Compose环境的标准配置流程，通过Nginx反向代理+Let's Encrypt免费证书实现：

1. 调整Docker Compose结构 #

修改你的docker-compose.yml，添加Nginx反向代理服务和certbot证书申请服务：

version: '3.8'

services:
  django:
    build: ./django-app  # 替换为你的Django应用构建路径
    command: gunicorn your_project.wsgi:application --bind 0.0.0.0:8000
    volumes:
      - ./django-app:/app
    expose:
      - 8000
    restart: always

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./certbot/conf:/etc/letsencrypt
      - ./certbot/www:/var/www/certbot
    restart: always
    depends_on:
      - django

  certbot:
    image: certbot/certbot
    volumes:
      - ./certbot/conf:/etc/letsencrypt
      - ./certbot/www:/var/www/certbot
    command: certonly --webroot -w /var/www/certbot --email your-email@example.com --agree-tos --no-eff-email -d your-domain.com

2. 配置Nginx反向代理规则 #

在./nginx/conf.d/default.conf中添加以下配置：

# HTTP请求重定向到HTTPS
server {
    listen 80;
    server_name your-domain.com;

    location / {
        return 301 https://$host$request_uri;
    }

    # 支持certbot的域名验证请求
    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
}

# HTTPS服务配置，反向代理到Django的gunicorn
server {
    listen 443 ssl;
    server_name your-domain.com;

    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://django: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;
    }
}

3. 初始化证书并启动服务 #

1. 创建所需目录：

mkdir -p ./nginx/conf.d ./certbot/conf ./certbot/www

2. 启动Nginx并申请证书：

docker-compose up -d nginx
docker-compose run --rm certbot certonly --webroot -w /var/www/certbot --email your-email@example.com --agree-tos --no-eff-email -d your-domain.com

3. 证书申请成功后，重启Nginx加载证书：

docker-compose restart nginx

4. 配置Django信任反向代理 #

修改Django项目的settings.py：

ALLOWED_HOSTS = ['your-domain.com']

# 信任Nginx的反向代理头，确保Django识别HTTPS请求
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

# 生产环境建议开启以下强制HTTPS配置
SECURE_SSL_REDIRECT = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True

5. 自动更新证书 #

Let's Encrypt证书有效期为90天，可添加定时任务自动更新：

# 编辑crontab，添加每月1号更新证书并重启Nginx的任务
crontab -e
# 加入以下内容
0 0 1 * * docker-compose run --rm certbot renew && docker-compose restart nginx

最后，修改前端fetch代码，将API地址改为HTTPS：

fetch(`https://your-domain.com/all/`, {
    method: "GET",
    headers: {
        'Content-Type': 'application/json',
    }
}).then((res) => {
    return res.json();
}).then((data) => {
    let informations = data.restaurant;
    // do stuff with data
}).catch((err) => {
    console.log(err);
})

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