Next.js静态导出模式下添加安全Header的解决方案咨询

当你使用Next.js的output:"export"静态导出模式时，Next.js不会启动Node.js服务器，所以headers()配置无法生效——这就是你遇到错误的核心原因。下面是几种可行的替代方案：

方案1：在部署平台层面配置安全头 #

这是最推荐的标准做法，安全头在服务器/CDN层配置能覆盖所有静态资源，防护范围最完整。

Vercel部署示例 #

在项目根目录创建vercel.json文件，添加以下配置：

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "Referrer-Policy",
          "value": "origin-when-cross-origin"
        }
      ]
    }
  ]
}

Netlify部署示例 #

在项目根目录创建netlify.toml文件，添加：

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "origin-when-cross-origin"

Nginx部署示例 #

在Nginx的站点配置中添加：

server {
  # 其他原有配置...
  location / {
    # 静态文件服务配置...
    add_header X-Frame-Options "DENY";
    add_header X-Content-Type-Options "nosniff";
    add_header Referrer-Policy "origin-when-cross-origin";
  }
}

方案2：在自定义文档中添加部分安全头（仅覆盖HTML文件） #

部分安全头可以通过HTML的<meta>标签设置，但仅对HTML文档生效，JS/CSS/图片等静态资源不会被覆盖，适合临时场景或无法修改服务器配置的情况。

Pages Router 场景 #

修改pages/_document.tsx：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta http-equiv="X-Frame-Options" content="DENY" />
          <meta http-equiv="X-Content-Type-Options" content="nosniff" />
          <meta name="referrer" content="origin-when-cross-origin" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

App Router 场景 #

修改app/layout.tsx的<head>部分：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <head>
        <meta http-equiv="X-Frame-Options" content="DENY" />
        <meta http-equiv="X-Content-Type-Options" content="nosniff" />
        <meta name="referrer" content="origin-when-cross-origin" />
      </head>
      <body>{children}</body>
    </html>
  );
}

方案3：通过CDN配置安全头 #

如果你的静态文件托管在CDN（如Cloudflare、阿里云CDN等），可以直接在CDN控制台的规则管理中添加安全头配置，操作逻辑和平台层面一致，具体步骤参考对应CDN的官方文档。

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