CORS 配置
配置跨域资源共享，允许浏览器访问 API。
边缘进阶
为什么
CORS 控制哪些源可访问你的 API — 配置错误导致安全漏洞或请求被阻止。Cloudflare 边缘网络覆盖 330+ 城市，全球 p95 延迟低于 50ms。
边缘函数相比源服务器将 TTFB 降低 60-80%，Akamai 报告 2024 年 40% 的企业使用边缘计算。
何时使用
从不同源的浏览器应用访问的 API。 需要数据库写入的有状态逻辑避免边缘函数 — 边缘运行时无持久连接池。需要长时间运行任务（>30s）或重 CPU 计算时跳过。
如何做
# Next.js API route CORS
import Cors from 'cors';
const cors = Cors({
origin: process.env.NODE_ENV === 'production'
? ['https://example.com', 'https://app.example.com']
: '*',
methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
allowedHeaders: ['Content-Type', 'Authorization'],
credentials: true,
maxAge: 86400,
});
export default async function handler(req, res) {
await new Promise((resolve, reject) => cors(req, res, (err) => err ? reject(err) : resolve()));
// Handle request
}
4. 验证部署 — curl -I https://your-app.example.com
5. 监控日志 — 前 5 分钟检查错误
6. 需要时回滚 — 回退到上一版本
示例
# Vercel 边缘 CORS
export default function handler(req: Request) {
const origin = req.headers.get('origin');
const allowed = ['https://example.com', 'https://app.example.com'];
if (!allowed.includes(origin)) {
return new Response('Forbidden', { status: 403 });
}
return new Response(JSON.stringify({ ok: true }), {
headers: {
'Access-Control-Allow-Origin': origin,
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
'Access-Control-Allow-Credentials': 'true',
},
});
}
常见问题
- ⚠预检失败 — 确保 OPTIONS handler 返回正确头
- ⚠凭据未发送 — 设 Allow-Credentials: true 和具体源（非 *）
- ⚠环境间配置漂移 — 使用基础设施即代码（Terraform/Pulumi）保持 dev/staging/prod 一致
最佳实践
- ✓凭据模式切勿用通配符 — 浏览器会拒绝
- ✓用允许列表验证源 — 防止 CSRF
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求