宝塔面板Nginx跨域设置方法

如果你正被前端请求因跨域问题被浏览器拦截而困扰——比如“CORS 头缺少”或“跨域拒绝访问”的报错，这篇文章正是为你量身定制的实战指南：它系统梳理了在宝塔面板中为 Nginx 配置跨域支持的四种高效、安全且场景适配的方案——从快速上手的直接添加响应头、便于多站复用的独立配置文件引入，到按路径精细化管控（如仅开放 `/api/`）、再到通过反向代理统一注入或覆盖后端 CORS 头，每一种方法都附带清晰步骤、关键注意事项和可直接复制的代码片段，助你精准解决开发与部署中的跨域痛点，让前后端联调从此畅通无阻。

如果您在使用宝塔面板部署的 Web 服务中遇到前端请求被浏览器拦截、提示“CORS 头缺少”或“跨域拒绝访问”，则很可能是后端未正确配置跨域响应头。以下是针对宝塔面板中 Nginx 配置文件添加跨域支持的具体操作步骤：

一、直接在站点配置文件中添加 CORS 头

该方法通过修改 Nginx 的 server 块，在响应头中显式注入 Access-Control-Allow-Origin 等字段，适用于大多数静态资源与 API 接口共存的场景。

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

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

3、在 location / { ... } 区块内（或需开放跨域的特定 location 块中），插入以下 Nginx 指令：

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

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

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

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

8、为兼容预检请求（OPTIONS），在相同 location 块内添加一个针对 OPTIONS 方法的返回规则：

9、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,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization'; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 204; }

10、点击右上角【保存】按钮，然后点击【重载配置】使更改生效。

二、使用 include 方式复用跨域配置

该方法将跨域相关指令抽离为独立文件，便于多个站点复用且避免重复编辑，适合管理多个需要统一 CORS 策略的站点。

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

2、新建文件，命名为 cors.conf，内容为：

3、add_header 'Access-Control-Allow-Origin' '$http_origin' always;

4、add_header 'Access-Control-Allow-Credentials' 'true' always;

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

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

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

8、在站点配置文件的 server 块内，插入：include /www/server/panel/vhost/nginx/cors.conf;

9、确保该 include 行位于 location / { ... } 块外部但 server { ... } 块内部，以保证全局生效。

10、保存配置文件并点击【重载配置】。

三、针对特定路径启用跨域（如仅 /api/）

该方法限制跨域响应仅作用于指定 URI 前缀，增强安全性，适用于仅需对 API 接口开放跨域、而静态资源保持严格同源策略的场景。

1、在站点配置文件中，找到或新增一个 location 块，匹配路径如 location ^~ /api/ { ... }。

2、在该 location 块内写入以下指令：

3、add_header 'Access-Control-Allow-Origin' 'https://your-trusted-domain.com';

4、add_header 'Access-Control-Allow-Credentials' 'true';

5、add_header 'Access-Control-Allow-Methods' 'POST, GET, OPTIONS';

6、add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';

7、为处理预检请求，在同一 location 块中添加：

8、if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' 'https://your-trusted-domain.com'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'POST, GET, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type'; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 204; }

9、将 your-trusted-domain.com 替换为实际允许的前端域名，不可使用 * 配合 credentials true。

10、保存配置并重载 Nginx。

四、通过反向代理透传跨域头（适用于后端应用自身不输出 CORS 头）

该方法适用于后端服务（如 Node.js、Python Flask/FastAPI）未主动设置响应头，而由 Nginx 在代理响应时注入跨域头，确保客户端收到合规响应。

1、确认站点配置中已启用反向代理，例如 proxy_pass http://127.0.0.1:3000; 所在的 location 块。

2、在该 location 块内，proxy_set_header 后添加如下响应头覆盖指令：

3、proxy_hide_header 'Access-Control-Allow-Origin';

4、proxy_hide_header 'Access-Control-Allow-Credentials';

5、add_header 'Access-Control-Allow-Origin' '*' always;

6、add_header 'Access-Control-Allow-Credentials' 'false' always;

7、add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;

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

9、注意：若后端本身已输出 Access-Control-Allow-Origin，需先用 proxy_hide_header 屏蔽，再用 add_header 统一注入，避免头重复冲突。

10、保存配置并重载 Nginx。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~