宝塔 Nginx 跨域（CORS）
「让任何域名都能安心调用你的图片 / API / 字体」
1. 一张图看懂「跨域」本质
浏览器问：『这资源我能拿吗？』
服务器答：『可以，名单在这里👇』| 名称 | 一句话解释 |
|---|---|
| Origin | 协议 + 域名 + 端口，任一不同即跨域 |
| CORS | 服务器用响应头告诉浏览器“我允许谁访问” |
| 预检请求 | 非简单请求会先发OPTIONS，服务器必须回正确头，否则直接拦截 |
2. 常见报错截图（一眼认出）
只要看到 No 'Access-Control-Allow-Origin' 就是 CORS 被拦。3. 核心思路：在「资源服务器」声明放行
| 调用场景 | 配置位置 |
|---|---|
| A 站页面要加载 B 站图片 | B 站 Nginx 加响应头 |
| A 站前端要请求 B 站接口 | B 站 Nginx / 后端加响应头 |
⚠️ 改的是被请求方，不是请求方！
4. 宝塔面板 30 秒搞定（动图级步骤）
① 进入「资源站点」→ 设置 → 配置文件
② 在 server{ } 段任意位置插入（一键复制）
# ========== CORS 通用 Start ==========
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
# ========== CORS 通用 End ==========| 环境 | 建议 |
|---|---|
| 开发 /测试 | 用* 最快 |
| 生产 | 改成具体域名，如https://yourdomain.com |
③ 保存 → 软件商店 → Nginx → 重启
5. 生产环境「更安全」写法速查
| 需求 | 配置片段 | 注意 |
|---|---|---|
| 仅允许指定域名 | add_header Access-Control-Allow-Origin https://a.com; | 不能同时出现多条 |
| 需携带 Cookie | 同上句 +add_header Access-Control-Allow-Credentials true; | 1. 不能用*2. 前端需 withCredentials=true |
| 只给静态资源 | 用 `location ~*.(jpg | jpeg |
6. 一键验证是否生效
# 把 https://your-b.com/logo.png 换成你的真实资源地址
curl -I -H "Origin: https://example.com" https://your-b.com/logo.png✅ 成功返回示例
HTTP/2 200
access-control-Allow-Origin: *看到 access-control-allow-origin 即成功，刷新浏览器即可。
7. 结语：跨域不是坑，是浏览器在守门
只要你在资源服务器礼貌地加上响应头，浏览器自然放行。
宝塔面板把「写配置 → 重载」变成可视化 30 秒操作，零命令行也能搞定！
