宝塔反向代理跨域报错处理

在使用宝塔面板搭建反向代理时，前后端分离的场景下常常会触发浏览器跨域报错（CORS）。该错误通常表现为浏览器控制台提示 Access-Control-Allow-Origin 缺失或不允许指定域名，导致请求被拦截。本文将介绍如何通过宝塔面板配置反向代理，在不修改后端代码的前提下解决跨域问题。

一、跨域报错的原理

跨域安全策略是浏览器基于同源协议（协议、域名、端口一致）的自我保护机制。当前端向不同源的后端发起请求时，浏览器会先发送一个 OPTIONS 预检请求，要求服务器返回允许的跨域响应头。若后端未正确返回 Access-Control-Allow-Origin 等字段，则报错。

二、通过宝塔面板设置反向代理

宝塔面板的 Nginx 或 Apache 反向代理功能可以添加自定义响应头。以 Nginx 为例，具体步骤如下：

1. 登录宝塔面板，进入网站设置，点击左侧“反向代理”菜单。
2. 添加一条反向代理规则，目标 URL 填写后端服务地址（如 http://127.0.0.1:8080）。
3. 在“配置文件”或“自定义配置”中，找到 location 块，添加以下响应头：
   

   add_header Access-Control-Allow-Origin '$http_origin' always;
   add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' 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;

4. 保存配置并重载 Nginx 服务。

三、处理预检请求（OPTIONS）

部分跨域请求会触发 OPTIONS 预检。若后端未处理 OPTIONS，可在反向代理中增加如下判断：

• 在 location 块中增加 if ($request_method = 'OPTIONS') { return 204; }，直接返回空状态码 204，无需转发到后端。
• 同时确保上述响应头在 OPTIONS 响应中同样生效。

四、注意事项

1. 通配符与凭证：当需要携带 Cookie 时（Access-Control-Allow-Credentials: true），Access-Control-Allow-Origin 不能使用 *，必须指定具体域名。上述配置中 $http_origin 会自动匹配请求来源，允许任意域名但不会与通配符冲突。

2. 宝塔面板版本差异：不同版本宝塔面板的配置位置可能略有不同，请根据实际界面寻找“自定义配置”或“配置文件”区域。若使用 Apache，则配置 Header always set Access-Control-Allow-Origin ... 等指令。

3. 安全性：生产环境中建议将 $http_origin 替换为固定的白名单域名，避免所有来源均可跨域请求。

五、验证解决方案

完成配置后，可通过浏览器开发者工具发起跨域请求，观察响应头是否包含所需字段。也可使用 curl 命令测试：
curl -H "Origin: http://example.com" -I http://your-proxy-domain/api
查看返回的 Access-Control-Allow-Origin 是否为预期值。

通过上述方法，绝大多数宝塔反向代理的跨域报错可得到有效解决，无需修改后端代码，运维效率显著提升。