Nginx跨域https调用视频/共享文件失效无法播放/M3U8切片播放

在视频A-B服务器不通域名路径中调用资源，可以参考此教程，文中代码域名问前端访问域名，不是后端共享资源服务器域名。
在宝塔面板中为 Nginx 服务器 配置 CORS（跨域资源共享），解决前端跨域请求问题。以下是完整、可直接复制的配置步骤，覆盖开发 / 生产环境、指定域名、带凭证请求等核心场景，操作简单且适配宝塔默认 Nginx 环境。

一、核心配置入口（必看）
所有 CORS 配置都在网站的 Nginx 配置文件中添加，进入路径：登录宝塔面板 → 左侧「网站」→ 找到目标网站，点击右侧「设置」；在弹出的窗口中，点击「配置文件」（直接编辑 Nginx 核心配置）。

二、分场景配置（直接复制使用）
在配置文件的 server 块内（建议放在 listen 或 server_name 下方），粘贴对应场景的代码，保存后重载 Nginx 即可生效。

场景 1：开发 / 测试环境 - 允许所有域名跨域（简单快捷）
适合本地调试，生产环境不推荐（存在安全风险），代码如下：
nginx

允许所有域名跨域（仅开发用）
add_header Access-Control-Allow-Origin *;
允许的请求方法（按需增删）
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
允许的请求头（按需增删，如token、自定义头）
add_header Access-Control-Allow-Headers 'Content-Type, Authorization, X-Requested-With';
预检请求缓存时间（减少重复预检，单位：秒）
add_header Access-Control-Max-Age 86400;

处理浏览器OPTIONS预检请求（关键！非简单请求必触发）
if ($request_method = 'OPTIONS') {
    return 204; # 直接返回204，无需后续处理
}

场景 2：生产环境 - 允许指定单个域名跨域（安全推荐）
仅允许特定前端域名（如 https://your-frontend.com）访问，生产环境首选：
nginx

仅允许指定域名跨域（替换为你的前端域名）
add_header Access-Control-Allow-Origin 'https://your-frontend.com';
允许的请求方法
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
允许的请求头
add_header Access-Control-Allow-Headers 'Content-Type, Authorization, X-Requested-With';
预检请求缓存
add_header Access-Control-Max-Age 86400;

处理OPTIONS预检请求
if ($request_method = 'OPTIONS') {
    return 204;
    }

场景 3：生产环境 - 允许多个指定域名跨域
若需允许多个前端域名（如 https://a.com、https://b.com），用变量匹配：
nginx

匹配允许的域名列表（按需增删，用|分隔）
set $cors_origin "";
if ($http_origin ~* 'https://a.com|https://b.com|https://c.com') {
    set $cors_origin $http_origin;
}
add_header Access-Control-Allow-Origin $cors_origin;

其他基础配置
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
add_header Access-Control-Allow-Headers 'Content-Type, Authorization, X-Requested-With';
add_header Access-Control-Max-Age 86400;

处理OPTIONS预检请求
if ($request_method = 'OPTIONS') {
    return 204;
}

场景 4：带凭证（Cookie/Token）跨域（如登录态、Session）
前端请求需携带 Cookie、Authorization 凭证时，必须开启此配置，且 Origin 不能为 *：
nginx

必须指定具体域名，不能用
add_header Access-Control-Allow-Origin 'https://your-frontend.com';
允许携带凭证（核心）
add_header Access-Control-Allow-Credentials true;
允许的请求方法
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
允许的请求头
add_header Access-Control-Allow-Headers 'Content-Type, Authorization, X-Requested-With';
预检请求缓存
add_header Access-Control-Max-Age 86400;

处理OPTIONS预检请求
if ($request_method = 'OPTIONS') {
    return 204;
}

前端同步配置：Axios 需加 axios.defaults.withCredentials = true，Fetch 需加 credentials: 'include'。

三、生效步骤（必做）
粘贴配置后，点击宝塔配置文件页面的「保存」；
重载 Nginx 使配置生效：
方式 1：宝塔面板首页 → 左侧「软件商店」→ 找到「Nginx」→ 点击「重载配置」；
方式 2：直接在网站设置页点击「重载配置」（部分版本支持）。
四、验证配置是否生效
浏览器打开前端页面，按 F12 进入开发者工具 → 「Network」面板；
发起跨域请求，查看请求的「Response Headers」，若包含 Access-Control-Allow-Origin 等配置的头信息，说明生效；
若仍跨域，清除浏览器缓存后重试，或检查配置是否粘贴在 server 块内（非 location 块内，避免优先级冲突）。