Custom HTTP Headers (_headers, vercel.json)
Set security, caching, and custom headers via configuration files.
EdgeBeginner
Why
Headers control caching, security (CSP, HSTS), and CORS — essential for production safety. Cloudflare's edge network spans 330+ cities with sub-50ms p95 latency globally.
Edge functions reduce TTFB by 60-80% compared to origin servers, and Akamai reports 40% of enterprises now use edge compute in 2024.
When
Any production site needing security headers or custom caching rules. Avoid edge functions for stateful logic requiring database writes — edge runtimes have no persistent connection pool.
Skip if you need long-running tasks (>30s) or heavy CPU computation.
How
# vercel.json headers
{
"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. Verify deployment — curl -I https://your-app.example.com
5. Monitor logs — check for errors in first 5 minutes
6. Rollback if needed — revert to previous version
Example
// config — deploy-headers-config
const config = require("./config");
# Netlify _headers file
/*
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
Common Problems
- ⚠Headers not applied — check source pattern matches
- ⚠CSP blocking resources — use report-uri to debug violations
- ⚠Configuration drift between environments — use infrastructure-as-code (Terraform/Pulumi) to keep dev/staging/prod identical
Best Practices
- ✓Use CSP report-only first — identify violations before enforcing
- ✓Set HSTS with preload — include in HSTS preload list
- ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit