为iframe添加请求头加载NextJS页面时__next div为空求助

• Next.js 渲染机制差异：直接用<iframe src="...">加载时，浏览器发起的是完整导航请求，Next.js 服务端会返回带渲染内容的HTML，同时浏览器自动加载所有依赖的JS、CSS资源，触发客户端水合（hydration）过程，最终填充#__next容器内容。
• fetch 请求的局限性：用fetch获取页面时，仅能拿到Next.js返回的初始骨架HTML；将其转为Blob URL加载到iframe后，页面内的Next.js客户端脚本会因资源路径错误（相对路径指向Blob URL而非原站点域名）无法加载，导致水合失败，#__next始终为空。
• 请求上下文不一致：fetch请求和浏览器导航请求的请求头、上下文（如Cookie、请求标识）存在差异，Next.js服务端可能将fetch请求识别为非导航请求，返回未填充内容的骨架页面。

方案1：通过 Cookie 传递认证信息（推荐，同域/跨域场景均适用） #

利用浏览器自动携带Cookie的特性，将认证token存入Cookie，直接加载iframe：

1. 主页面设置Cookie：

document.cookie = "authToken=your-token; path=/; domain=your-domain.com; SameSite=Lax; Secure";

2. Next.js服务端通过req.cookies获取token：

// pages/login.js 或 middleware.js
export async function getServerSideProps(context) {
  const token = context.req.cookies.authToken;
  // 验证token并返回渲染数据
  return { props: { /* 渲染数据 */ } };
}

3. 直接使用iframe加载：

<iframe src="https://mynextjsapp.com/login"></iframe>

方案2：利用 postMessage 传递认证信息（跨域场景可选） #

若无法使用Cookie，可通过postMessage在主页面和iframe间传递token：

1. 主页面代码：

<iframe id="myIframe" src="https://mynextjsapp.com/login"></iframe>
<script>
const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', () => {
  iframe.contentWindow.postMessage({ type: 'AUTH_TOKEN', token: 'your-token' }, 'https://mynextjsapp.com');
});
</script>

2. Next.js页面（login.js）添加监听：

// pages/login.js
import { useEffect } from 'react';

export default function Login() {
  useEffect(() => {
    const handleMessage = (event) => {
      if (event.origin !== 'https://your-main-site.com') return;
      if (event.data.type === 'AUTH_TOKEN') {
        const token = event.data.token;
        // 存储token，发起带认证头的请求获取数据并渲染
      }
    };
    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return <div id="__next">{/* 页面内容 */}</div>;
}

方案3：修改Next.js服务端返回完整渲染内容（复杂场景） #

若必须使用fetch方式，需调整Next.js服务端逻辑，确保返回的HTML能正常加载资源：

1. Next.js middleware中识别fetch请求：

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const isFetchRequest = request.headers.get('X-Fetch-Request') === 'true';
  if (isFetchRequest) {
    const token = request.headers.get('Authorization');
    // 这里可添加token验证逻辑
    const response = NextResponse.next();
    return response;
  }
  return NextResponse.next();
}

2. 主页面fetch时处理HTML路径：

async function getSrc() {
  const res = await fetch("https://mynextjsapp.com/login", {
    method: 'GET',
    headers: {
      "Authorization": "token",
      "X-Fetch-Request": "true"
    }
  });
  let html = await res.text();
  // 将相对资源路径替换为绝对路径
  html = html.replace(/src="\//g, 'src="https://mynextjsapp.com/');
  html = html.replace(/href="\//g, 'href="https://mynextjsapp.com/');
  const blob = new Blob([html], { type: 'text/html' });
  const urlObject = URL.createObjectURL(blob);
  document.querySelector('iframe').setAttribute("src", urlObject);
}
getSrc();

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