登录
首页 >  文章 >  php教程

宝塔面板配置CORS头部方法详解

时间:2026-03-30 16:03:14 319浏览 收藏

如果你正被宝塔面板部署的网站跨域问题困扰——前端请求屡遭浏览器拦截,却不知从何下手解决,那么这篇详解将为你清晰梳理三种高效、稳定且适配不同场景的CORS配置方案:无论是直接修改Nginx/Apache服务器配置、利用宝塔反向代理统一注入响应头,还是通过PHP脚本在应用层动态控制,每种方法都配有精准的代码示例与一步到位的操作指引,助你快速解除跨域限制,让前后端通信畅通无阻。

宝塔面板如何配置网站的跨域资源共享CORS头部?

如果您在使用宝塔面板部署的网站中遇到前端请求被浏览器拦截的问题,很可能是由于服务端未正确配置跨域资源共享(CORS)响应头。以下是为宝塔面板托管网站添加CORS头部的具体操作方法:

一、通过网站配置文件手动添加CORS头

该方法适用于所有Web服务器类型(Nginx/Apache),直接修改站点配置文件,在响应中注入Access-Control-Allow-Origin等关键头字段。

1、登录宝塔面板,进入【网站】页面,找到目标站点,点击右侧【设置】按钮。

2、在弹出窗口中切换至【配置文件】选项卡。

3、若使用Nginx服务器,在location /区块内(或其上方)插入以下代码:

add_header 'Access-Control-Allow-Origin' '*';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';

add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';

add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

4、若使用Apache服务器,在配置文件末尾的区块内添加:

Header set Access-Control-Allow-Origin "*"

Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"

Header set Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization"

Header set Access-Control-Expose-Headers "Content-Length,Content-Range"

5、点击右上角【保存】按钮,再点击【重载配置】使更改生效。

二、通过反向代理规则添加CORS响应头

当网站通过宝塔的反向代理功能对外提供服务时,可在代理配置中统一注入CORS头,避免修改源站逻辑。

1、在网站【设置】中,进入【反向代理】选项卡。

2、点击【添加反向代理】或编辑已有代理规则。

3、在【响应头设置】区域,点击【添加响应头】按钮三次以上,分别填入:

Access-Control-Allow-Origin: *

Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE

Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization

4、勾选【启用响应头】,点击【提交】保存配置。

5、返回【网站】列表,点击对应站点右侧【重启】按钮以应用新代理规则。

三、通过PHP脚本动态输出CORS头

适用于仅需对特定PHP接口启用CORS的场景,无需修改服务器配置,由应用层控制响应头内容。

1、打开网站根目录或对应API所在目录,编辑入口PHP文件(如index.php、api.php等)。

2、在

header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE');

header('Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization');

header('Access-Control-Expose-Headers: Content-Length,Content-Range');

3、若需支持携带凭证(如Cookie),将第一行改为:

header('Access-Control-Allow-Origin: https://your-frontend-domain.com');

header('Access-Control-Allow-Credentials: true');

4、确保上述header()调用位于任何输出(包括空格、换行)之前,否则会报错“headers already sent”。

四、通过Nginx的include方式复用CORS配置

适用于多个站点需统一CORS策略的环境,将CORS头定义为独立配置片段,便于集中维护和批量启用。

1、使用宝塔【文件】管理器,进入/www/server/panel/vhost/nginx/目录。

2、新建文件cors.conf,写入以下内容:

add_header Access-Control-Allow-Origin "*" always;

add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE" always;

add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization" always;

add_header Access-Control-Expose-Headers "Content-Length,Content-Range" always;

3、返回各站点配置文件,在server块内任意位置添加:

include /www/server/panel/vhost/nginx/cors.conf;

4、保存所有配置文件,执行【Nginx】→【重载配置】命令。

以上就是《宝塔面板配置CORS头部方法详解》的详细内容,更多关于的资料请关注golang学习网公众号!

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>