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!' })
跨域资源共享 (CORS) 是一种安全功能,允许您控制哪些网站可以访问您的资源。您可以设置 Access-Control-Allow-Origin
标头以允许特定来源访问您的 API 端点。
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",
此标头 控制 DNS 预取,允许浏览器主动对外部链接、图像、CSS、JavaScript 等执行域名解析。此预取在后台执行,因此 DNS 在需要引用项时更有可能被解析。这减少了用户点击链接时的延迟。
key: 'X-DNS-Prefetch-Control',
value: 'on'
此标头 通知浏览器只能使用 HTTPS 访问,而不是使用 HTTP。使用以下配置,所有当前和将来的子域将在 max-age
为 2 年的情况下使用 HTTPS。这将阻止访问只能通过 HTTP 提供的页面或子域。
如果您要部署到 Vercel,则此标头不是必需的,因为它会自动添加到所有部署中,除非您在 next.config.js
中声明 headers
。
key: 'Strict-Transport-Security',
value: 'max-age=63072000; includeSubDomains; preload'
此标头 指示是否允许在 iframe
中显示该网站。这可以防止点击劫持攻击。
此标头已被 CSP 的 frame-ancestors
选项取代,该选项在现代浏览器中具有更好的支持(有关配置详细信息,请参阅 内容安全策略)。
key: 'X-Frame-Options',
value: 'SAMEORIGIN'
此标头 允许您控制浏览器中可以使用哪些功能和 API。它以前称为 Feature-Policy
。
key: 'Permissions-Policy',
value: 'camera=(), microphone=(), geolocation=(), browsing-topics=()'
此标头 防止浏览器在未明确设置 Content-Type
标头的情况下尝试猜测内容类型。这可以防止允许用户上传和共享文件的网站的 XSS 攻击。
例如,用户尝试下载图像,但将其视为不同的 Content-Type
,例如可执行文件,这可能是恶意的。此标头也适用于下载浏览器扩展。此标头的唯一有效值为 nosniff
。
key: 'X-Content-Type-Options',
value: 'nosniff'
此标头 控制浏览器在从当前网站(来源)导航到另一个网站时包含多少信息。
key: 'Referrer-Policy',
value: 'origin-when-cross-origin'