方法不止一种，这里就细说啦。

2、配置服务器（这里以nginx为例）

下面我把核心部分解释放在注释说明，这是简单版本用于说明HTTP转HTTPS，如果真的上生产其实还有不少其它配置。

server {
  listen 80;   // 监听http默认的80端口
  return 301 https://$host$request_uri; // 把所有http永久重定向到https
  server_name ****.com www.****.com;  // 指定域名,这里视真实情况而定
}
server {
  listen 443 ssl; // 监听https默认的443端口。
  server_name ****.com www.****.com;  // 指定域名,这里视真实情况而定
  
  // 指定 SSL 证书文件路径。
  ssl_certificate /etc/lets/live/****.com/fullchain.pem;
  
  // 指定 SSL 私钥文件路径
  ssl_certificate_key /etc/lets/live/****.com/privkey.pem;
  location / {
      index index.html index.htm;
      root /var/w/html;
  }
}

方法二：使用代理服务

用nodejs搭建个简单的代理服务器（这里是用nodejs举例，真实业务场景可能是后端那边搞）

要先安装对应的依赖，例如

npm init -y
npm install express http-proxy

然后再配置对应的代理服务器，主要核心是下面四个模块

const express = require('express');
const fs = require('fs');
const https = require('https');
const http = require('http');
const httpProxy = require('http-proxy');
const app = express();
const proxy = httpProxy.createProxyServer();
const port = 3000;
// 读取对应的SSL证书文件
const options = {
  key: fs.readFileSync('/etc/lets/live/proxy.****.com/privkey.pem'),
  cert: fs.readFileSync('/etc/lets/live/proxy.****.com/fullchain.pem')
};
// 设置路由信息
app.all('/proxy/*', (req, res) => {
  const targetUrl = `http://${req.params[0]}`;
  proxy.web(req, res, { target: targetUrl }, (error) => {
    res.status(500).send('Proxy request failed');
  });
});
// 创建HTTPS服务器
const server = https.createServer(options, app);
// 启动代理服务器
server.listen(port, () => {
  console.log(`HTTPS`);
});

五、跨域问题

简述： iframe 页面的跨域问题是因为涉及到浏览器的安全策略，即同源策略。同源策略限制了一个网页脚本不能读写不同源页面的 DOM 与 Cookie之类的信息。即如果 iframe 中的内容与包含它的页面不在同一个源上，那么这两个页面之间会受到跨域限制。

解决思路：

1、使用 window.postMessage 实现跨域通信

父页面代码： 主要用window.addEventListener监听消息用postMessage发送消息。

注意： @load加载完成后再监听和window.removeEventListener取消监听这两个细节。

<template>
  <div>
    <iframe :src="iframeSrc" ref="iframeRef" @load="onIframeLoad" style="width: 100%; height: 400px;">iframe>
    <button @click="sendMessage">发送消息button>
  div>
template>
<script setup>
import { ref, onMounted } from 'vue';
onMounted(() => {
  window.addEventListener('message', handleMessage);
  // 在组件卸载时移除事件监听器
  return () => {
    window.removeEventListener('message', handleMessage);
  };
});
const iframeSrc = 'http://***.com';
const iframeRef = ref(null);
  // 当 iframe 加载完成后，再设置监听器
const onIframeLoad = () => {
  window.addEventListener('message', handleMessage);
};
const sendMessage = () => {
  const iframe = iframeRef.value;
  if (iframe.contentWindow) {
    iframe.contentWindow.postMessage('Hello!', 'http://***.com');
  }
};
const handleMessage = (event) => {
  // 确保来自想要的源才处理消息
  if (event.origin !== 'http://***.com') return;
  console.log( event.data);
};
script>

子页面代码：和父页面一样，用window.addEventListener监听消息用postMessage发送消息。

<template>
  <div>
    <button @click="sendMessage">发送消息到父页面button>
  div>
template>
<script setup>
import { ref, onMounted } from 'vue';
onMounted(() => {
  window.addEventListener('message', handleMessage);
  // 在组件卸载时移除事件监听器
  return () => {
    window.removeEventListener('message', handleMessage);
  };
});
const sendMessage = () => {
  const parentWindow = window.parent;
  if (parentWindow) {
    parentWindow.postMessage('Hello!', 'http://****.com');
  }
};
const handleMessage = (event) => {
  if (event.origin !== 'http://****.com') return;
  console.log(event.data);
};
script>

2、使用 document.domain

document.domain用于解决二级域名之间跨域问题的方法，例如： 和 ，它们都属于同一个顶级域名 ，这时就适合用document.domain来让这两个页面能够相互访问。用法相当于简单，就是分别设置两个页面的document.domain。

核心代码在第10与19行。

3、使用 CORS

这里主要是后端的配置了，通过调整服务器响应头中的 Access-Control-Allow-Origin 来控制哪些源是可以安全访问资源。

以为nginx为例，*设置为所有。

http {
  server {
      listen 80;
      server_name yourdomain.com;  # 替换为你的域名
      # 代理 iframe 请求并添加 CORS 头部
      location /iframe-proxy/ {
          # 添加CORS头部
          add_header Access-Control-Allow-Origin *;
          # 其他配置...
      }
  }
}

4、nginx配置代理

算是常见解决方案了，思路是通过 Nginx 反向代理，将请求重定向到想要请求的目标服务器。

核心就是第10行代码，具体可以特意去看看nginx。

http {
  server {
      listen 80;
      server_name yourdomain.com;  # 替换为你的域名
      # 代理 iframe 请求并添加 CORS 头部
      location /iframe-proxy/ {
          # 将请求代理到目标
          proxy_pass http://tty.com/;  
          # 其他配置...
      }
  }
}

六、iframe嵌入后报拒绝连接请求

不知道你用iframe有没有见过这个页面，这通常是目标页面设置了 X-Frame-Options 响应头来限制内容被嵌入到其他站点的 iframe 中。这个可以找后端看看 X-Frame-Options 。

小结

都是把遇到的场景总结了一下，感觉都是比较常见的情况。

如果大佬们有什么iframe的“坑”也可以分享一下我同步学习一下，还有那里写的不好也可以指出更正鸭