宝塔面板网站跨域设置：零基础也能搞定的完整教程

前后端分离开发时，经常遇到浏览器提示“No 'Access-Control-Allow-Origin' header”，这就是跨域问题。
本文在 宝塔面板网站跨域设置 这个场景下，帮你用最短时间解决它。

准备工作：确认你的环境

• 已安装宝塔面板（推荐 7.0+ 版本）
• 有一个正在运行的站点（Nginx 或 Apache 均可，本文以 Nginx 为例）
• 知道需要允许哪些域名访问你的资源（例如允许前端域名 https://example.com 或所有域名）
• 如果站点开启了 SSL，请确保操作前已配置好证书

不需要懂 Nginx 语法，全程在宝塔后台操作即可。

核心操作：通过宝塔添加跨域头

有两种常用方式，推荐使用第一种（可视化配置）：

方法一：在“默认文档”中添加自定义配置

1. 登录宝塔面板，进入左侧 网站 → 找到你要配置的站点 → 点击 设置
2. 在弹出的窗口中选择 配置文件 选项卡
3. 找到 server 块中 location 部分（或者直接在 server 块末尾），添加以下代码：

# 允许所有来源（开发阶段常用，生产环境建议指定域名）
add_header Access-Control-Allow-Origin '*';
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE';
add_header Access-Control-Allow-Headers 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';

如果你只想允许特定域名，把 * 替换成你的前端地址，例如 https://myapp.com（注意不要加末尾斜杠，且必须带上协议）。

重要： 如果你使用了 CDN 或反向代理，跨域头需要回源服务器上配置。

1. 点击 保存，然后点击 重载配置 使生效。

方法二：修改 Nginx 站点配置文件（适合需要精细控制时）

如果你更习惯直接编辑文件，可以在宝塔面板的网站上找到 文件 选项卡，进入站点根目录，找到 .htaccess（Apache）或直接在 Nginx 主配置中编辑。
宝塔会定期重写配置文件，所以建议使用方法一的图形化方式，避免编辑后被覆盖。

处理预检请求（Preflight）

浏览器在跨域 POST 请求前会先发一个 OPTIONS 请求，Nginx 必须正确响应。
如果配置了上面的跨域头，一般已自动处理。
如果你遇到 405 Not Allowed 或 502，可以单独为 OPTIONS 请求添加处理：

if ($request_method = 'OPTIONS') {
    add_header Access-Control-Allow-Origin '*';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE';
    add_header Access-Control-Allow-Headers 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';
    add_header Content-Length 0;
    add_header Content-Type text/plain;
    return 204;
}

这段代码同样加到配置文件中的 server 块或 location 里。

验证设置是否生效

方法一：浏览器开发者工具

打开 F12，切换到 Network（网络）标签，刷新前端页面。
找到你跨域请求的接口，点击查看响应头（Response Headers），看是否出现 Access-Control-Allow-Origin，并且值与你设置的一致。

方法二：使用 curl 命令

在本地终端执行（替换成你的后端接口地址）：

curl -I https://你的域名/api/test

输出中会包含响应头，如果看到 Access-Control-Allow-Origin: * 或你指定的域名，说明配置成功。

高频问题与避坑说明

Q：配置后仍然报跨域错误？

• 检查浏览器缓存：清理缓存或使用无痕模式重新测试。
• 确认配置的 Nginx 站点就是实际请求的服务端。如果后端另有端口或容器，需要在对应服务上配置，而不是前端静态站点。
• 检查是否同时有多个 add_header 冲突。宝塔默认会输出一些 X-Frame-Options 等，最好将跨域头放在 if 外部靠前的位置。

Q：可以配置多个域名吗？
不可以。Access-Control-Allow-Origin 不允许设置多个域名，只能写一个或使用 *。如果需要动态判断，建议在后端代码中处理（比如根据 Origin 请求头判断并返回对应值）。宝塔面板网站跨域设置单纯靠 Nginx 很难实现动态多域名，但大部分场景用一个域名或 * 已足够。

Q：设置后网站变得不安全吗？
Access-Control-Allow-Origin: * 确实会允许任何网站通过浏览器访问你的资源。生产环境请务必指定具体域名，避免数据泄露。

Q：重新配置后不生效？
请确认你是否点过“重载配置”或重启了 Nginx。宝塔的设置页面右上角有“重载配置”按钮。如果修改了配置文件，需要点击 服务 → Nginx → 重载配置。

补充建议

• 对于前后端分离项目，请先确认后端接口是否已正确返回跨域头。如果你用的是 Node.js、PHP 等后端框架，很多框架自带跨域中间件，优先使用中间件而不是 Nginx。
• 如果你用了宝塔自带的 Nginx 防火墙（如 ngx_lua_waf），可能会拦截 OPTIONS 请求，请关闭相关规则或添加白名单。

完成后，你就可以安心地调用接口开发了。
如果你正在处理 宝塔面板网站跨域设置 中的难题，建议先按本文步骤操作，遇到异常时回看高频问题和避坑部分。