宝塔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 秒操作，零命令行也能搞定！