宝塔面板Nginx跨域设置教程

本文详细讲解了在宝塔面板中为Nginx服务器配置跨域（CORS）的四种实用方法——从简单粗放的全局响应头添加，到精准控制API路径的location策略，再到便于多站点复用的include配置方案，最后延伸至与后端协同处理OPTIONS预检请求的高级模式；无论你是刚遇到“Access-Control-Allow-Origin缺失”报错的新手，还是需要兼顾安全性、可维护性与前后端协作的运维或开发者，都能从中找到适配当前场景的一站式解决方案。

如果您在使用宝塔面板部署的 Web 应用中遇到前端请求被浏览器拦截、提示“CORS 头缺少 'Access-Control-Allow-Origin'”等问题，则说明当前 Nginx 未正确配置跨域响应头。以下是针对宝塔面板中 Nginx 环境设置跨域访问的多种方法：

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

该方法通过修改站点对应的 Nginx 配置文件，在 server 或 location 块内注入 Access-Control-Allow 相关响应头，适用于单一域名或明确受信源的场景。

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

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

3、在 server 块内（通常位于 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、若需支持携带 Cookie 的跨域请求，需将 Access-Control-Allow-Origin 替换为具体域名（如 https://example.com），并添加：add_header 'Access-Control-Allow-Credentials' 'true';

5、点击右上角【保存】，再点击【重载配置】使 Nginx 生效。

二、通过 location 块精准控制 API 接口跨域

该方法将跨域响应头仅作用于特定路径（如 /api/ 开头的接口），避免对静态资源等非接口路径误加 CORS 头，提升安全性与规范性。

1、进入目标站点【配置文件】选项卡。

2、在 server 块末尾或合适位置新增如下 location 块：

　　location ^~ /api/ {

　　　　add_header 'Access-Control-Allow-Origin' 'https://trusted-site.com';

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

　　　　add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';

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

　　　　add_header 'Access-Control-Max-Age' '1728000';

　　　　if ($request_method = 'OPTIONS') {

　　　　　　add_header 'Access-Control-Allow-Origin' 'https://trusted-site.com';

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

　　　　　　add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';

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

　　　　　　add_header 'Access-Control-Max-Age' '1728000';

　　　　　　add_header 'Content-Type' 'text/plain; charset=utf-8';

　　　　　　add_header 'Content-Length' 0;

　　　　　　return 204;

　　　　}

　　　　try_files $uri $uri/ /index.php?$query_string;

　　}

3、将 https://trusted-site.com 替换为实际允许跨域的前端域名。

4、保存配置并点击【重载配置】。

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

该方法将 CORS 配置抽离为独立文件，便于多个站点共用或版本管理，适合多项目维护场景。

1、通过宝塔【文件】功能，进入 /www/server/nginx/conf/ 目录。

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

　　add_header 'Access-Control-Allow-Origin' '$http_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;

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

3、返回目标站点【配置文件】，在 server 块内任意位置添加：include /www/server/nginx/conf/cors.conf;

4、保存配置并点击【重载配置】。

四、启用预检请求（OPTIONS）透传至后端处理

该方法不依赖 Nginx 返回预检响应，而是将 OPTIONS 请求转发给后端应用自行处理，适用于后端框架已内置 CORS 支持（如 Spring Boot、Express、Laravel）的情况。

1、进入站点【配置文件】选项卡。

2、定位到 location ~ \.php$ { ... } 或类似 PHP 处理块。

3、在该 location 块内添加判断逻辑：

　　if ($request_method = 'OPTIONS') {

　　　　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-Allow-Credentials' 'true' always;

　　　　add_header 'Access-Control-Max-Age' 1728000 always;

　　　　add_header 'Content-Type' 'text/plain; charset=utf-8' always;

　　　　add_header 'Content-Length' 0 always;

　　　　return 204;

　　}

4、确保后端代码中已实现对 OPTIONS 请求的响应逻辑。

5、保存配置并点击【重载配置】。

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