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

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

配置概述

本文档详细介绍了 default.confnginx_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的获取

相关推荐
心易行者21 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~21 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge21 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再21 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴21 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟1 天前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1231 天前
CSS易忘属性
前端·css
瓜瓜怪兽亚1 天前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院1 天前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233401 天前
React组件完全指南
前端·javascript·react.js