https和http混用导致报错

解决 Mixed Content 错误：HTTPS 页面加载 HTTP 图片被拦截问题

在 HTTPS 网站开发中，Mixed Content（混合内容）错误是常见问题，表现为页面通过 HTTPS 加载，但请求了 HTTP 协议的资源（如图片、脚本），浏览器为安全起见会直接拦截该请求。本文结合实际配置（Nginx + Docker + 前端），记录问题排查与解决过程。

一、问题现象与原因分析

1. 错误日志

浏览器控制台明确提示混合内容错误，核心信息如下：

plaintext

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This request has been blocked; the content must be served over HTTPS.

2. 根本原因

• 页面本身通过 HTTPS 协议加载（Nginx 配置了 9012 端口的 SSL）；
• 图片资源实际请求的是后端 ruoyi-minio:9010 服务，而 Nginx 的 proxy_pass 配置为 HTTP 协议（http://ruoyi-minio:9010）；
• 虽然后端服务在 Docker 内部通信，但浏览器感知到资源 “源头是 HTTP”，触发安全拦截机制。

3. 解决方案

• 通过自定义的代理路径img-proxy，在nginx中识别到这个自定义路径时，把https转发成http

二、相关配置梳理

以下是当前环境的核心配置，便于定位问题节点：

1. Nginx 配置（HTTPS 与反向代理）

nginx

server {
    # 监听 9012 端口，启用 SSL（HTTPS）
    listen 9012 ssl;

    # SSL 证书与密钥路径（自签证书，仅用于测试）
    ssl_certificate /etc/nginx/ssl/self-signed.crt;
    ssl_certificate_key /etc/nginx/ssl/self-signed.key;

    # 图片代理接口：处理 /img-proxy/ 路径的请求
    location /img-proxy/ {
        # 重写路径：去掉 /img-proxy 前缀，转发到后端服务
        rewrite ^/img-proxy(/.*)$ $1 break;
        # 关键问题点：使用 HTTP 协议代理到 minio 服务
        proxy_pass http://ruoyi-minio:9010;
        # 转发请求头，确保后端获取正确的客户端信息
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 告知后端当前前端使用的协议（HTTPS）
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

2. Docker Compose 配置（端口映射与挂载）

yaml

ruoyi-nginx:
  container_name: ruoyi-nginx  # 容器名称
  image: nginx  # 基础镜像
  build:
    context: ./nginx  # 构建上下文路径
  ports:
    - "8090:8081"
    - "8091:8082"
    - "8013:8013"
    - "9012:9012"  # 关键：9012 端口（HTTPS）映射到宿主机
  volumes:
    # 前端静态文件挂载
    - ./nginx/html/dist:/home/ruoyi/projects/ruoyi-ui
    # Nginx 主配置文件挂载
    - ./nginx/conf/nginx.conf:/etc/nginx/nginx.conf
    # 日志目录挂载
    - ./nginx/logs:/var/log/nginx
    # SSL 证书与密钥挂载（对应 Nginx 配置路径）
    - ./nginx/conf/self-signed.key:/etc/nginx/ssl/self-signed.key
    - ./nginx/conf/self-signed.crt:/etc/nginx/ssl/self-signed.crt
  depends_on:
    - ruoyi-gateway  # 依赖网关服务，确保网关先启动
  links:
    - ruoyi-gateway  # 链接到网关服务，实现容器间通信
  environment:
    TZ: Asia/Shanghai  # 设置时区，避免日志时间错乱
  networks:
    - ryCloud  # 加入自定义网络，与其他服务互通

3. 前端图片请求代码

html

预览

<!-- 图片路径：使用 HTTPS + 9012 端口 + /img-proxy 代理路径 -->
<img 
  style="width:200px;height:200px;" 
  src="https://192.168.11.188:9012/img-proxy/static-resources-bucket/xxx.png" 
  alt="" 
  srcset=""
>