Skip to content
返回部署

自定义 HTTP 头(_headers、vercel.json)

通过配置文件设置安全、缓存和自定义头。

边缘入门

为什么

头控制缓存、安全(CSP、HSTS)和 CORS — 生产安全必需。Cloudflare 边缘网络覆盖 330+ 城市,全球 p95 延迟低于 50ms。

边缘函数相比源服务器将 TTFB 降低 60-80%,Akamai 报告 2024 年 40% 的企业使用边缘计算。

何时使用

任何需要安全头或自定义缓存规则的生产站点。 需要数据库写入的有状态逻辑避免边缘函数 — 边缘运行时无持久连接池。需要长时间运行任务(>30s)或重 CPU 计算时跳过。

如何做

# Vercel.JSON 头s { "headers": [ { "source": "/(.*)", "headers": [ { "key": "X-Content-Type-Options", "value": "nosniff" }, { "key": "X-Frame-Options", "value": "DENY" }, { "key": "X-XSS-Protection", "value": "1; mode=block" }, { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }, { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" } ] }, { "source": "/api/(.*)", "headers": [ { "key": "Access-Control-Allow-Origin", "value": "https://example.com" } ] } ] } 4. 验证部署 — curl -I https://your-app.example.com 5. 监控日志 — 前 5 分钟检查错误 6. 需要时回滚 — 回退到上一版本

示例

// 配置 — deploy-headers-config const config = require("./config"); # Netlify _头s 文件 /* X-Frame-Options: DENY X-Content-Type-Options: nosniff Cache-Control: public, max-age=3600 /api/* Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Methods: GET, POST, OPTIONS

常见问题

  • ⚠头未应用 — 检查 source 模式匹配
  • ⚠CSP 阻止资源 — 用 report-uri 调试违规
  • ⚠环境间配置漂移 — 使用基础设施即代码(Terraform/Pulumi)保持 dev/staging/prod 一致

最佳实践

  • ✓先用 CSP report-only — 强制前识别违规
  • ✓设 HSTS 带 preload — 加入 HSTS preload 列表
  • ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求

常见问题解答