代码之家  ›  专栏  ›  技术社区  ›  Patrick Potocny

Next.js 14草稿模式在iframe中不起作用(无头CMS预览)

  •  0
  • Patrick Potocny  · 技术社区  · 1 年前

    我已尝试使用 Draft Mode 在我的两个项目中 下一个.js 14 和无头CMS(Storyblok、Crystalize)。虽然草稿模式在浏览器选项卡中运行得很好,但它在CMS UI的任何预览(iframe)中都不起作用。我以前的项目是用 页面路由器 其中的“预览模式”(与草稿模式相同的功能)可以工作,因此与CMS无关。

    这是我的设置:

    • 下一个.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}`);
    }

    以下是我尝试过但没有成功的内容:

    1. 将Nextjs更新到最新版本
    2. 参考此 GH issue 。我试过人们提出的所有解决方案/变通办法,但都没有奏效。甚至检查响应中的cookie是否正确: enter image description here
    3. 使用Firefox
    4. 设置一个随机cookie(例如测试cookie=12345),以检查是否会设置任何cookie,当我注销所有cookie时,测试cookie在iframe中可见
    0 回复  |  直到 1 年前