自定义 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 以在退出前排空进行中的请求