https项目中嵌入http格式的iframe, nginx 代理实现

用户11481867894842025-08-22 10:41

公司内部开发需求，实现本地https的协议不能动，外部http的协议改不了，但是必须要实现https的项目中，嵌入一个http协议的iframe项目

配置概述

本文档详细介绍了 default.conf 和 nginx_proxy.conf 两个Nginx配置文件的功能、结构及使用方法。这两个配置文件共同实现了HTTPS测试环境的搭建，并提供了内置HTTP的iframe代理功能。

文件说明

文件名	主要功能
`default.conf`	配置HTTPS 443端口，处理本地应用访问
`nginx_proxy.conf`	配置HTTPS 444端口，处理外部网站代理访问

配置详解

1. default.conf

default.conf 主要用于配置HTTPS 443端口，处理本地应用的访问请求。

nginx 复制代码

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    return 301 https://$host:443$request_uri;
}

server {
    listen  443 ssl;
    ...
    location /xxx {
        proxy_pass http://127.0.0.1:8380/xxx;
    }
    ...
}

2. nginx_proxy.conf

nginx_proxy.conf 主要用于配置HTTPS 444端口，处理外部网站的代理访问，并解决HTTP iframe在HTTPS页面中的混合内容问题。

nginx 复制代码

server {
    listen       81;
    listen  [::]:81;
    server_name  localhost;
    return 301 https://$host:444$request_uri;
}

server {
    listen  444 ssl;
    location / {
      proxy_pass http://www.baidu.com:8018;
      
      ...
      # 关键优化：使用正则匹配，确保完整替换http链接
      sub_filter_types *;  # 覆盖
      sub_filter 'http://www.baidu.com:8091/pecker/application/image/' 'https://$host:444/pecker-icon/pecker/application/image/';
      ...
  }

  # 对应图片的代理路径（需和上面替换的路径一致）
  location /pecker-icon/ {
      proxy_pass http://www.baidu.com:8091/;  # 末尾的斜杠必须保留
      proxy_set_header Host www.opcood.com:8091;  # 强制传递原始Host（关键！）
      proxy_set_header X-Forwarded-Proto $scheme;
  }    
}

代理分为两个的原因是放入一个代理中，原始代理会影响到iframe中js，css的获取