Nginx 跨域配置中如何通过 include 将通用的跨域响应头配置抽离为可复用的代码片段

将跨域响应头抽成独立 cors.conf 文件并用 include 引入，可提升 Nginx 配置可维护性与复用性；文件仅含 add_header 指令且带 always 参数，置于 /etc/nginx/conf.d/ 下，在 location 或 server 块中引入即可生效。

把跨域响应头抽成独立文件用 include 引入，是 Nginx 配置中提升可维护性、避免重复的关键做法。它能让同一套 CORS 头在多个站点或 location 中复用，修改一处，全局生效。

跨域头配置文件单独存放

在 /etc/nginx/conf.d/（或宝塔的 /www/server/panel/vhost/nginx/ 下统一目录）新建一个 cors.conf 文件，内容只写响应头，不包含任何 location 或 server 结构：

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;

注意：

1. 使用 $http_origin 动态取请求头中的 Origin，比硬写 * 更安全，尤其配合 Access-Control-Allow-Credentials true 时必须这么做；
2. 所有 add_header 后加 always，确保即使返回 302、404 等非 2xx 状态码时头也生效；
3. 不要在该文件里写 if、proxy_pass 或 return，保持纯粹的头注入逻辑。

在站点配置中引入

打开宝塔面板中目标站点的 Nginx 配置文件（【 】→【设置】→【配置文件】），在需要支持跨域的 location 块内（如 /api/）或 server 块顶层插入：

location /api/ {include /etc/nginx/conf.d/cors.conf;proxy_pass http://backend;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}

也可以放在 server 块开头，让整个站点都带 CORS 头（慎用，静态资源通常不需要）：

server {listen 80;server_name example.com;include /etc/nginx/conf.d/cors.conf;# 全局生效location / {root /www/wwwroot/example.com;index index.html;}}

多环境适配建议（进阶）

若需开发、测试、生产环境使用不同策略，可配合 map 指令 + 多个 include：

1. 新建 cors-dev.conf、cors-prod.conf；
2. 在主配置中用 map 判断环境变量或 Host，设 $cors_conf 变量；
3. 再 include $cors_conf —— Nginx 支持变量形式的 include（需 1.10+）。

验证与注意事项

1. 修改后务必点击【重载配置】，不要只点保存；
2. 浏览器开发者工具 → Network → 查看响应头是否出现 Access-Control-Allow-*；
3. 若看到头没生效，检查：
   1. include 路径是否拼写正确、文件是否存在且有读取权限；
   2. 是否被 proxy_hide_header 或后端响应覆盖（可在 proxy_pass 后加 proxy_hide_header 显式清除后端同名头）；
   3. add_header 作用域是否匹配（在 location 里写的头，不会自动继承到子 location）。

不复杂但容易忽略