解决跨域问题：btpanel-v7.7.0 Nginx CORS配置指南

解决跨域问题：btpanel-v7.7.0 Nginx CORS配置指南

【免费下载链接】btpanel-v7.7.0 宝塔v7.7.0官方原版备份 项目地址: https://gitcode.com/GitHub_Trending/btp/btpanel-v7.7.0

跨域问题(Cross-Origin Resource Sharing)的常见场景

当网页从一个域名请求另一个域名的资源时，浏览器会执行同源策略检查。在使用宝塔面板(btpanel-v7.7.0)搭建的服务中，常见跨域场景包括：

• 前端页面与API服务分离部署
• 第三方域名调用面板API接口
• 子域名间资源共享

宝塔面板Nginx配置文件路径

根据项目结构分析，宝塔面板的Nginx配置文件通常位于以下路径：

/www/server/panel/vhost/nginx/

该路径在install/install_panel.sh中通过以下代码创建：

mkdir -p ${setup_path}/server/panel/vhost/nginx

Nginx CORS核心配置代码

在对应站点的Nginx配置文件中添加以下配置块：

location / {
    # 允许的源域名，*表示所有
    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';
    
    # 处理预检请求
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

配置生效步骤

1. 登录宝塔面板，进入左侧菜单「网站」
2. 找到目标网站，点击「设置」→「配置文件」
3. 将上述CORS配置添加到server块中
4. 点击「保存」并重启Nginx服务

验证CORS配置是否生效

使用浏览器开发者工具(DevTools)的Network面板：

1. 发起跨域请求
2. 检查Response Headers中是否包含：

   Access-Control-Allow-Origin: *
   

常见问题解决

静态资源跨域

若仅需允许静态资源跨域，可针对性配置：

location ~* \.(jpg|jpeg|png|css|js)$ {
    add_header Access-Control-Allow-Origin *;
}

带凭证的跨域请求

当需要传递Cookie等凭证时，需指定具体域名：

add_header Access-Control-Allow-Origin https://example.com;
add_header Access-Control-Allow-Credentials true;

配置文件管理建议

1. 修改配置前备份原文件：

cp /www/server/panel/vhost/nginx/yourdomain.conf /www/server/panel/vhost/nginx/yourdomain.conf.bak

2. 通过宝塔面板的「配置还原」功能可快速恢复配置

相关文件参考

• 面板安装脚本：install/install_panel.sh
• 软件配置列表：install/conf/softList.conf
• 服务初始化脚本：install/src/bt7.init

通过以上步骤，可有效解决btpanel-v7.7.0环境下的跨域访问问题。建议根据实际业务需求调整Access-Control-Allow-Origin参数，避免过度开放权限。

【免费下载链接】btpanel-v7.7.0 宝塔v7.7.0官方原版备份 项目地址: https://gitcode.com/GitHub_Trending/btp/btpanel-v7.7.0