头部 | DevRefinery | DevRefinery

头部允许您在给定路径上对传入请求的响应设置自定义 HTTP 头部。

要设置自定义 HTTP 头部，您可以在 next.config.js 中使用 headers 键：

javascript

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 - 匹配时是否不包含区域设置。
has 是一个 has 对象数组，包含 type、key 和 value 属性。
missing 是一个 missing 对象数组，包含 type、key 和 value 属性。

头部在文件系统（包括页面和 /public 文件）之前进行检查。

头部覆盖行为

如果两个头部匹配相同的路径并设置相同的头部键，则最后一个头部键将覆盖第一个。使用下面的头部配置，路径 /hello 的头部 x-hello 将为 world，因为最后一个设置的头部值为 world。

javascript

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

路径匹配

允许路径匹配，例如 /blog/:slug 将匹配 /blog/first-post（无嵌套路径）：

javascript

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/first-post 和 /blog/post-1，但不匹配像 /blog/a/b 这样的嵌套路径。模式锚定在开头，/blog/:slug 将不匹配 /archive/blog/first-post。

您可以在参数上使用修饰符：*（零个或多个），+（一个或多个），?（零个或一个）。例如，/blog/:slug* 匹配 /blog、/blog/a 和 /blog/a/b/c。

请阅读 path-to-regexp 文档了解更多详情。

通配符路径匹配

要匹配通配符路径，您可以在参数后使用 *，例如 /blog/:slug* 将匹配 /blog/a/b/c/d/hello-world：

javascript

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：

javascript

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

以下字符 (, ), {, }, :, *, +, ? 用于正则表达式路径匹配，因此当它们在 source 中作为非特殊值使用时，必须在其前面添加 \\ 进行转义：

javascript

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

头部、Cookie 和查询匹配

只有当头部、Cookie 或查询值与 has 字段匹配或与 missing 字段不匹配时，才应用头部。source 和所有 has 项必须匹配，并且所有 missing 项都不能匹配，头部才会生效。

has 和 missing 项可以包含以下字段：

type: String - 必须是 header、cookie、host 或 query 之一。
key: String - 用于匹配的选定类型中的键。
value: String 或 undefined - 要检查的值，如果为 undefined，则任何值都将匹配。可以使用类似正则表达式的字符串来捕获值的特定部分，例如，如果值为 first-(?<paramName>.*)，且匹配到 first-second，那么 second 将可以在目标中使用 :paramName 访问。

javascript

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 为前缀：

javascript

module.exports = {
  basePath: '/docs',

  async headers() {
    return [
      {
        source: '/with-basePath', // becomes /docs/next.js/zh-cn/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` 的头部

App Router Only

当头部利用 i18n 支持时，除非您在头部中添加 locale: false，否则每个 source 都将自动以配置的 locales 为前缀进行处理。如果使用了 locale: false，您必须为 source 添加区域设置前缀才能正确匹配。

Pages Router Only

javascript

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 Only

了解更多关于使用 App Router 进行缓存的信息。

Pages Router Only

如果您需要重新验证已静态生成的页面的缓存，可以通过在该页面的 getStaticProps 函数中设置 revalidate 属性来实现。

要缓存 API 路由的响应，您可以使用 res.setHeader：

typescript

import type { NextApiRequest, NextApiResponse } from 'next'

type ResponseData = {
  message: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  res.setHeader('Cache-Control', 's-maxage=86400')
  res.status(200).json({ message: 'Hello from Next.js!' })
}

javascript

export default function handler(req, res) {
  res.setHeader('Cache-Control', 's-maxage=86400')
  res.status(200).json({ message: 'Hello from Next.js!' })
}

您还可以在 getServerSideProps 内部使用缓存头部 (Cache-Control) 来缓存动态响应。例如，使用 stale-while-revalidate。

typescript

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export const getServerSideProps = (async (context) => {
  context.res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}) satisfies GetServerSideProps

javascript

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

选项

CORS

跨域资源共享 (CORS) 是一项安全功能，允许您控制哪些站点可以访问您的资源。您可以设置 Access-Control-Allow-Origin 头部以允许特定源访问您的

Pages Router Only

API 端点

App Router Only

路由处理器

。

javascript

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 更有可能已解析。这减少了用户点击链接时的延迟。

javascript

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

Strict-Transport-Security

此头部通知浏览器应仅使用 HTTPS 访问，而不是使用 HTTP。使用以下配置，所有当前和未来的子域名将在 max-age 为 2 年内使用 HTTPS。这会阻止访问只能通过 HTTP 服务的页面或子域名。

javascript

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

X-Frame-Options

此头部指示网站是否允许在 iframe 中显示。这可以防止点击劫持攻击。

此头部已被 CSP 的 frame-ancestors 选项取代，该选项在现代浏览器中具有更好的支持（有关配置详情，请参阅内容安全策略）。

javascript

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

Permissions-Policy

此头部允许您控制浏览器中可以使用哪些功能和 API。它以前名为 Feature-Policy。

javascript

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

X-Content-Type-Options

此头部可防止浏览器在未明确设置 Content-Type 头部时尝试猜测内容类型。这可以防止允许用户上传和共享文件的网站上的 XSS 攻击。

例如，用户尝试下载图像，但其被视为不同的 Content-Type，如可执行文件，这可能是恶意的。此头部也适用于下载浏览器扩展。此头部唯一有效的值是 nosniff。

javascript

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

Referrer-Policy

此头部控制浏览器在从当前网站（源）导航到另一个网站时包含多少信息。

javascript

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

Content-Security-Policy

了解更多关于向您的应用程序添加内容安全策略的信息。

版本历史

版本	更改
`v13.3.0`	添加了 `missing`。
`v10.2.0`	添加了 `has`。
`v9.5.0`	添加了 Headers。

头部允许您在给定路径上对传入请求的响应设置自定义 HTTP 头部。

要设置自定义 HTTP 头部，您可以在 next.config.js 中使用 headers 键：

javascript

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 - 匹配时是否不包含区域设置。
has 是一个 has 对象数组，包含 type、key 和 value 属性。
missing 是一个 missing 对象数组，包含 type、key 和 value 属性。

头部在文件系统（包括页面和 /public 文件）之前进行检查。

头部覆盖行为

javascript

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

路径匹配

允许路径匹配，例如 /blog/:slug 将匹配 /blog/first-post（无嵌套路径）：

javascript

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、/blog/a 和 /blog/a/b/c。

请阅读 path-to-regexp 文档了解更多详情。

通配符路径匹配

要匹配通配符路径，您可以在参数后使用 *，例如 /blog/:slug* 将匹配 /blog/a/b/c/d/hello-world：

javascript

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：

javascript

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

以下字符 (, ), {, }, :, *, +, ? 用于正则表达式路径匹配，因此当它们在 source 中作为非特殊值使用时，必须在其前面添加 \\ 进行转义：

javascript

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 项可以包含以下字段：

type: String - 必须是 header、cookie、host 或 query 之一。
key: String - 用于匹配的选定类型中的键。
value: String 或 undefined - 要检查的值，如果为 undefined，则任何值都将匹配。可以使用类似正则表达式的字符串来捕获值的特定部分，例如，如果值为 first-(?<paramName>.*)，且匹配到 first-second，那么 second 将可以在目标中使用 :paramName 访问。

javascript

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 为前缀：

javascript

module.exports = {
  basePath: '/docs',

  async headers() {
    return [
      {
        source: '/with-basePath', // becomes /docs/next.js/zh-cn/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` 的头部

App Router Only

Pages Router Only

javascript

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

但是，您可以为其他响应或数据设置 Cache-Control 头部。

App Router Only

了解更多关于使用 App Router 进行缓存的信息。

Pages Router Only

如果您需要重新验证已静态生成的页面的缓存，可以通过在该页面的 getStaticProps 函数中设置 revalidate 属性来实现。

要缓存 API 路由的响应，您可以使用 res.setHeader：

typescript

import type { NextApiRequest, NextApiResponse } from 'next'

type ResponseData = {
  message: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  res.setHeader('Cache-Control', 's-maxage=86400')
  res.status(200).json({ message: 'Hello from Next.js!' })
}

javascript

export default function handler(req, res) {
  res.setHeader('Cache-Control', 's-maxage=86400')
  res.status(200).json({ message: 'Hello from Next.js!' })
}

您还可以在 getServerSideProps 内部使用缓存头部 (Cache-Control) 来缓存动态响应。例如，使用 stale-while-revalidate。

typescript

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export const getServerSideProps = (async (context) => {
  context.res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}) satisfies GetServerSideProps

javascript

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

选项

CORS

跨域资源共享 (CORS) 是一项安全功能，允许您控制哪些站点可以访问您的资源。您可以设置 Access-Control-Allow-Origin 头部以允许特定源访问您的

Pages Router Only

API 端点

App Router Only

路由处理器

。

javascript

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

javascript

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

Strict-Transport-Security

javascript

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

X-Frame-Options

此头部指示网站是否允许在 iframe 中显示。这可以防止点击劫持攻击。

此头部已被 CSP 的 frame-ancestors 选项取代，该选项在现代浏览器中具有更好的支持（有关配置详情，请参阅内容安全策略）。

javascript

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

Permissions-Policy

此头部允许您控制浏览器中可以使用哪些功能和 API。它以前名为 Feature-Policy。

javascript

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

X-Content-Type-Options

此头部可防止浏览器在未明确设置 Content-Type 头部时尝试猜测内容类型。这可以防止允许用户上传和共享文件的网站上的 XSS 攻击。

javascript

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

Referrer-Policy

此头部控制浏览器在从当前网站（源）导航到另一个网站时包含多少信息。

javascript

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

Content-Security-Policy

了解更多关于向您的应用程序添加内容安全策略的信息。

版本历史

版本	更改
`v13.3.0`	添加了 `missing`。
`v10.2.0`	添加了 `has`。
`v9.5.0`	添加了 Headers。

文档导航

头部覆盖行为

路径匹配

通配符路径匹配

正则表达式路径匹配

头部、Cookie 和查询匹配

支持 basePath 的头部

支持 i18n 的头部

Cache-Control

选项

CORS

X-DNS-Prefetch-Control

Strict-Transport-Security

X-Frame-Options

Permissions-Policy

X-Content-Type-Options

Referrer-Policy

Content-Security-Policy

版本历史

头部覆盖行为

路径匹配

通配符路径匹配

正则表达式路径匹配

头部、Cookie 和查询匹配

支持 basePath 的头部

支持 i18n 的头部

Cache-Control

选项

CORS

X-DNS-Prefetch-Control

Strict-Transport-Security

X-Frame-Options

Permissions-Policy

X-Content-Type-Options

Referrer-Policy

Content-Security-Policy

版本历史

支持 `basePath` 的头部

支持 `i18n` 的头部

支持 `basePath` 的头部

支持 `i18n` 的头部