CORS 跨域不通？服务端与前端两端最小配置
CORS 跨域不通？服务端与前端两端最小配置
安全风信子
发布于 2025-11-18 19:21:09
发布于 2025-11-18 19:21:09
一句话承诺：一张表+两段代码，快速打通简单跨域请求。
头部对照表
头 | 示例 | 说明 |
|---|---|---|
Access-Control-Allow-Origin | https://app.dev | 或 * |
Access-Control-Allow-Methods | GET,POST | 允许方法 |
Access-Control-Allow-Headers | Authorization | 自定义头 |
Access-Control-Allow-Credentials | true | 允许cookie |
服务端示例（Node/Express）
app.use((req,res,next)=>{
res.header('Access-Control-Allow-Origin','https://app.dev');
res.header('Access-Control-Allow-Methods','GET,POST,PUT,DELETE');
res.header('Access-Control-Allow-Headers','Content-Type,Authorization');
res.header('Access-Control-Allow-Credentials','true');
if (req.method === 'OPTIONS') return res.sendStatus(204);
next();
});前端示例（fetch）
fetch('https://api.dev/data', {
method: 'GET',
credentials: 'include',
headers: { 'Authorization': 'Bearer xxx' }
});少量解释
- 有凭证场景不能使用 *，需精准域名。
- 预检（OPTIONS）需返回允许头，否则被浏览器拦截。
常见坑与替代法
- 坑：服务端未返回 Allow-Headers。替代：按需补齐自定义头。
- 坑：多域开发。替代：白名单匹配动态设置Allow-Origin。
下一篇预告
CDN 回源与缓存规则：Cache-Key 与回源时序（图+表）。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-11-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
