Next.js 14 Draft Mode在无头CMS预览iframe中失效求助

算力阿峰

2026-6-28

Next.js 14 App Router Draft Mode在CMS预览iframe中无法正常工作

我在两个基于Next.js 14与无头CMS（Storyblok、Crystalize）构建的项目中使用Draft Mode，该功能在浏览器标签页中运行正常，但在CMS UI的预览iframe中完全无法工作。此前基于Pages Router构建的项目中，相同功能的Preview Mode可正常运行，因此问题与CMS无关。

环境配置：

Next.js 14.0.4
local-ssl-proxy（iframe要求HTTPS）
Chrome v121
CMS：Storyblok或Crystalize
Ubuntu 22.04.3

draft/route.ts 代码：

// route handler with secret and slug
import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';
import { paths } from '@/constants/paths';

export async function GET(request: Request) {
  // Parse query string parameters
  const { searchParams } = new URL(request.url);
  const crystallizeSignature = searchParams.get('crystallizeSignature');
  const slug = searchParams.get('slug');

  // TODO: Check the secret and slug
  if (!crystallizeSignature || !slug) {
    return new Response('Invalid token', { status: 401 });
  }

  // Enable Draft Mode by setting the cookie
  draftMode().enable();

  // Redirect to the path from the fetched post and remove the prefix
  const slugWithoutPrefix = slug.replace(paths.crystallizeRoot, '');

  redirect(`${slugWithoutPrefix}`);
}