通过 Nginx 反向代理解决跨域问题的核心思路是：将不同域名或端口的请求统一代理到同一域名下，从而绕过浏览器的跨域限制。以下是宝塔面板中配置反向代理的具体步骤：

一、反向代理解决跨域的原理

• 跨域问题的本质 浏览器出于安全考虑，禁止前端代码通过 XMLHttpRequest 或 Fetch API 直接访问不同域名、端口或协议的资源（即跨域请求）。
• 反向代理的作用 通过 Nginx 将不同域名或端口的请求代理到同一域名下，让浏览器认为所有请求均来自同一源，从而避免跨域限制。

二、宝塔面板配置反向代理步骤

方法 1：通过宝塔图形界面配置

• 登录宝塔面板: 进入「网站」模块，找到需要配置的网站，点击右侧的「设置」按钮。

• 添加反向代理:

点击「反向代理」标签 → 选择「添加反向代理」。

填写以下信息：

1. 代理名称：自定义（如 proxy-api）
2. 目标URL：填写后端服务的地址（如 http://127.0.0.1:8080 或 https://api.example.com
3. 发送域名：默认 $host（或手动指定为后端服务的域名，如 api.example.com）

点击「提交」。

• 配置高级参数（可选） 在反向代理的「配置文件」中，可添加以下参数确保请求头透传：

proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;

方法 2：手动修改 Nginx 配置文件

定位配置文件 配置文件路径：
/www/server/panel/vhost/nginx/你的网站域名.conf。

添加反向代理规则 在 server 块中添加以下配置（示例代理到本地 8080 端口的后端服务）：

location /api/ {
 proxy_pass http://127.0.0.1:8080/; # 后端服务地址
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;

 # 可选：解决 WebSocket 代理问题
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "upgrade";
}

重启 Nginx

nginx -t # 检查配置语法
systemctl restart nginx # 重启生效

三、配置示例与说明

示例场景

• 前端域名: https://www.example.com
• 后端接口: https://api.example.com:8080

通过反向代理将前端请求 /api/ 路径代理到后端服务：

server {
    listen 80;
    server_name www.example.com;

    location /api/ {
        proxy_pass http://api.example.com:8080/;  # 后端地址
        proxy_set_header Host api.example.com;    # 关键：指定后端接收的域名
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # 可选：解决跨域头（部分场景需额外配置）
        add_header Access-Control-Allow-Origin *; 
    }

    # 其他配置...
}

四、反向代理 vs CORS 头配置

五、注意事项

路径匹配规则

若前端请求路径为 /api/user，后端实际接口为 /user，可通过 proxy_pass 调整：

location /api/ {
 proxy_pass http://backend-server/; # 末尾的 `/` 会去除 `/api` 前缀
}

WebSocket 代理 如需代理 WebSocket，需添加 Upgrade 和 Connection 头（见方法 2 示例）。

HTTPS 配置 若前端为 HTTPS，确保后端服务或反向代理也支持 HTTPS，避免混合协议问题。

调试工具 使用浏览器开发者工具的 Network 标签检查请求是否被正确代理，并观察响应头中的 X-Proxy 信息（如有）。

通过上述配置，所有通过 /api/ 的请求会被 Nginx 转发到后端服务，且浏览器认为请求与前端同源，彻底解决跨域问题。