配置next.config.jsheaders

headers

標頭允許您對給定路徑上的傳入請求的響應設定自定義 HTTP 標頭。

要設定自定義 HTTP 標頭，您可以在 next.config.js 中使用 headers 鍵。

module.exports = {
  async headers() {
    return [
      {
        source: '/about',
        headers: [
          {
            key: 'x-custom-header',
            value: 'my custom header value',
          },
          {
            key: 'x-another-custom-header',
            value: 'my other custom header value',
          },
        ],
      },
    ]
  },
}

headers 是一個非同步函式，它期望返回一個數組，其中包含具有 source 和 headers 屬性的物件。

source 是傳入請求的路徑模式。
headers 是響應標頭物件的陣列，具有 key 和 value 屬性。
basePath: false 或 undefined - 如果為 false，則在匹配時不包含 basePath，僅可用於外部重寫。
locale: false 或 undefined - 匹配時是否不包含 locale。
has 是一個具有 type、key 和 value 屬性的 has 物件陣列。
missing 是一個具有 type、key 和 value 屬性的 missing 物件陣列。

標頭在檔案系統（包括頁面和 /public 檔案）之前進行檢查。

標頭覆蓋行為

如果兩個標頭匹配相同的路徑並設定相同的標頭鍵，則最後一個標頭鍵將覆蓋第一個。使用以下標頭，路徑 /hello 將導致標頭 x-hello 為 world，因為設定的最後一個標頭值為 world。

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'x-hello',
            value: 'there',
          },
        ],
      },
      {
        source: '/hello',
        headers: [
          {
            key: 'x-hello',
            value: 'world',
          },
        ],
      },
    ]
  },
}

路徑匹配

允許路徑匹配，例如 /blog/:slug 將匹配 /blog/hello-world（無巢狀路徑）

module.exports = {
  async headers() {
    return [
      {
        source: '/blog/:slug',
        headers: [
          {
            key: 'x-slug',
            value: ':slug', // Matched parameters can be used in the value
          },
          {
            key: 'x-slug-:slug', // Matched parameters can be used in the key
            value: 'my other custom header value',
          },
        ],
      },
    ]
  },
}

萬用字元路徑匹配

要匹配萬用字元路徑，您可以在引數後使用 *，例如 /blog/:slug* 將匹配 /blog/a/b/c/d/hello-world

module.exports = {
  async headers() {
    return [
      {
        source: '/blog/:slug*',
        headers: [
          {
            key: 'x-slug',
            value: ':slug*', // Matched parameters can be used in the value
          },
          {
            key: 'x-slug-:slug*', // Matched parameters can be used in the key
            value: 'my other custom header value',
          },
        ],
      },
    ]
  },
}

正則表示式路徑匹配

要匹配正則表示式路徑，您可以在引數後將正則表示式括在括號中，例如 /blog/:slug(\\d{1,}) 將匹配 /blog/123 但不匹配 /blog/abc

module.exports = {
  async headers() {
    return [
      {
        source: '/blog/:post(\\d{1,})',
        headers: [
          {
            key: 'x-post',
            value: ':post',
          },
        ],
      },
    ]
  },
}

以下字元 (、)、{、}、:、*、+、? 用於正則表示式路徑匹配，因此當在 source 中用作非特殊值時，必須透過在它們前面新增 \\ 進行轉義

module.exports = {
  async headers() {
    return [
      {
        // this will match `/english(default)/something` being requested
        source: '/english\\(default\\)/:slug',
        headers: [
          {
            key: 'x-header',
            value: 'value',
          },
        ],
      },
    ]
  },
}

要僅在標頭、cookie 或查詢值也匹配 has 欄位或不匹配 missing 欄位時應用標頭。source 和所有 has 項必須匹配，並且所有 missing 項必須不匹配才能應用標頭。

has 和 missing 項可以具有以下欄位

type: String - 必須是 header、cookie、host 或 query。
key: String - 要匹配的所選型別的鍵。
value: String 或 undefined - 要檢查的值，如果未定義，則任何值都將匹配。可以使用類似正則表示式的字串來捕獲值的特定部分，例如，如果 first-(?<paramName>.*) 用於 first-second，那麼 second 將在目標中與 :paramName 一起使用。

module.exports = {
  async headers() {
    return [
      // if the header `x-add-header` is present,
      // the `x-another-header` header will be applied
      {
        source: '/:path*',
        has: [
          {
            type: 'header',
            key: 'x-add-header',
          },
        ],
        headers: [
          {
            key: 'x-another-header',
            value: 'hello',
          },
        ],
      },
      // if the header `x-no-header` is not present,
      // the `x-another-header` header will be applied
      {
        source: '/:path*',
        missing: [
          {
            type: 'header',
            key: 'x-no-header',
          },
        ],
        headers: [
          {
            key: 'x-another-header',
            value: 'hello',
          },
        ],
      },
      // if the source, query, and cookie are matched,
      // the `x-authorized` header will be applied
      {
        source: '/specific/:path*',
        has: [
          {
            type: 'query',
            key: 'page',
            // the page value will not be available in the
            // header key/values since value is provided and
            // doesn't use a named capture group e.g. (?<page>home)
            value: 'home',
          },
          {
            type: 'cookie',
            key: 'authorized',
            value: 'true',
          },
        ],
        headers: [
          {
            key: 'x-authorized',
            value: ':authorized',
          },
        ],
      },
      // if the header `x-authorized` is present and
      // contains a matching value, the `x-another-header` will be applied
      {
        source: '/:path*',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        headers: [
          {
            key: 'x-another-header',
            value: ':authorized',
          },
        ],
      },
      // if the host is `example.com`,
      // this header will be applied
      {
        source: '/:path*',
        has: [
          {
            type: 'host',
            value: 'example.com',
          },
        ],
        headers: [
          {
            key: 'x-another-header',
            value: ':authorized',
          },
        ],
      },
    ]
  },
}

支援 basePath 的標頭

當透過標頭利用 basePath 支援時，除非您將 basePath: false 新增到標頭，否則每個 source 都會自動加上 basePath 字首。

module.exports = {
  basePath: '/docs',
 
  async headers() {
    return [
      {
        source: '/with-basePath', // becomes /docs/with-basePath
        headers: [
          {
            key: 'x-hello',
            value: 'world',
          },
        ],
      },
      {
        source: '/without-basePath', // is not modified since basePath: false is set
        headers: [
          {
            key: 'x-hello',
            value: 'world',
          },
        ],
        basePath: false,
      },
    ]
  },
}

支援 i18n 的標頭

當利用 i18n 支援和標頭時，每個 source 都會自動加上字首以處理配置的 locales，除非您將 locale: false 新增到標頭。如果使用 locale: false，您必須為 source 新增區域設定字首，才能正確匹配。

module.exports = {
  i18n: {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
  },
 
  async headers() {
    return [
      {
        source: '/with-locale', // automatically handles all locales
        headers: [
          {
            key: 'x-hello',
            value: 'world',
          },
        ],
      },
      {
        // does not handle locales automatically since locale: false is set
        source: '/nl/with-locale-manual',
        locale: false,
        headers: [
          {
            key: 'x-hello',
            value: 'world',
          },
        ],
      },
      {
        // this matches '/' since `en` is the defaultLocale
        source: '/en',
        locale: false,
        headers: [
          {
            key: 'x-hello',
            value: 'world',
          },
        ],
      },
      {
        // this gets converted to /(en|fr|de)/(.*) so will not match the top-level
        // `/` or `/fr` routes like /:path* would
        source: '/(.*)',
        headers: [
          {
            key: 'x-hello',
            value: 'world',
          },
        ],
      },
    ]
  },
}

Cache-Control

Next.js 對真正不可變資產設定 Cache-Control 標頭為 public, max-age=31536000, immutable。此設定無法覆蓋。這些不可變檔案在檔名中包含 SHA 雜湊，因此可以安全地無限期快取。例如，靜態圖片匯入。您無法在 next.config.js 中為這些資產設定 Cache-Control 標頭。

但是，您可以為其他響應或資料設定 Cache-Control 標頭。

瞭解更多關於使用 App Router 進行快取的資訊。

選項

CORS

跨域資源共享 (CORS) 是一種安全功能，允許您控制哪些站點可以訪問您的資源。您可以設定 Access-Control-Allow-Origin 標頭，以允許特定源訪問您的資源。路由處理器.

async headers() {
    return [
      {
        source: "/api/:path*",
        headers: [
          {
            key: "Access-Control-Allow-Origin",
            value: "*", // Set your origin
          },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET, POST, PUT, DELETE, OPTIONS",
          },
          {
            key: "Access-Control-Allow-Headers",
            value: "Content-Type, Authorization",
          },
        ],
      },
    ];
  },

X-DNS-Prefetch-Control

此標頭控制 DNS 預取，允許瀏覽器主動對外部連結、圖片、CSS、JavaScript 等執行域名解析。此預取在後臺執行，因此當需要引用的專案時，DNS 更可能已解析。這減少了使用者點選連結時的延遲。

{
  key: 'X-DNS-Prefetch-Control',
  value: 'on'
}

Strict-Transport-Security

此標頭通知瀏覽器只能使用 HTTPS 訪問該站點，而不是使用 HTTP。使用以下配置，所有當前和未來的子域名將在 2 年的 max-age 內使用 HTTPS。這會阻止訪問只能透過 HTTP 提供的頁面或子域名。

{
  key: 'Strict-Transport-Security',
  value: 'max-age=63072000; includeSubDomains; preload'
}

X-Frame-Options

此標頭指示是否允許在 iframe 中顯示該站點。這可以防止點選劫持攻擊。

此標頭已被 CSP 的 frame-ancestors 選項取代，該選項在現代瀏覽器中支援更好（有關配置詳細資訊，請參閱內容安全策略）。

{
  key: 'X-Frame-Options',
  value: 'SAMEORIGIN'
}

Permissions-Policy

此標頭允許您控制瀏覽器中可以使用哪些功能和 API。它以前名為 Feature-Policy。

{
  key: 'Permissions-Policy',
  value: 'camera=(), microphone=(), geolocation=(), browsing-topics=()'
}

X-Content-Type-Options

此標頭可防止瀏覽器在未明確設定 Content-Type 標頭時嘗試猜測內容型別。這可以防止允許使用者上傳和共享檔案的網站受到 XSS 攻擊。

例如，使用者嘗試下載圖片，但它被視為不同的 Content-Type，如可執行檔案，這可能是惡意的。此標頭也適用於下載瀏覽器擴充套件。此標頭唯一有效的值是 nosniff。

{
  key: 'X-Content-Type-Options',
  value: 'nosniff'
}

Referrer-Policy

此標頭控制瀏覽器在從當前網站（源）導航到另一個網站時包含多少資訊。

{
  key: 'Referrer-Policy',
  value: 'origin-when-cross-origin'
}

Content-Security-Policy

瞭解更多關於為您的應用程式新增內容安全策略的資訊。

版本歷史

版本	更改
`v13.3.0`	`missing` 已新增。
`v10.2.0`	`has` 已新增。
`v9.5.0`	標頭已新增。