当前位置:首页 > 文章列表 > 文章 > php教程 > 宝塔面板配置CORS头部方法详解

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

2026-03-30 16:03:14 0浏览 收藏
如果你正被宝塔面板部署的网站跨域问题困扰——前端请求屡遭浏览器拦截,却不知从何下手解决,那么这篇详解将为你清晰梳理三种高效、稳定且适配不同场景的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学习网公众号!

Windows 8 USB选择性暂停设置方法Windows 8 USB选择性暂停设置方法
上一篇
Windows 8 USB选择性暂停设置方法
Everything如何找重复文件并清理【技巧】
下一篇
Everything如何找重复文件并清理【技巧】
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
查看更多
AI推荐
  • PubMedQA数据集详解:生物医学问答基准、功能与应用指南
    PubMedQA
    深入了解PubMedQA生物医学问答数据集,涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用,助力提升NLP模型性能。
    355次使用
  • H2O EvalGPT:开源LLM大模型评估与排行榜工具
    H2O EvalGPT
    H2O EvalGPT是H2O.ai推出的开源LLM评估平台,提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能,助您快速选择最适合项目的高性能大语言模型。
    416次使用
  • LMArena是什么?伯克利AI模型评估平台使用指南与功能解析
    LMArena
    LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制,用户可对比不同大模型回答并生成实时排行榜,助力开发者优化模型及用户选择最佳AI工具。
    423次使用
  • 斯坦福HELM:大语言模型Holistic Evaluation整体评估框架详解
    HELM
    深入了解斯坦福推出的HELM(Holistic Evaluation of Language Models)大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景,涵盖准确性、公平性、鲁棒性等多维度指标,助力开发者全面优化语言模型性能。
    378次使用
  • MMBench详解:多模态大模型基准测试、功能特点与使用指南
    MMBench
    MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台,提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景,助力开发者全面评估多模态模型性能。
    200次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码