宝塔面板https

通过 Nginx 反向代理解决跨域问题的核心思路在于将来自不同域名或端口的请求统一经由 Nginx 服务器代理到同一域名下，以此来绕过浏览器的同源策略限制。以下是在宝塔面板中进行反向代理配置的详细步骤：

一、反向代理解决跨域问题的基本原理

跨域问题本质上是浏览器出于安全考虑，禁止前端代码直接通过 XMLHttpRequest 或 Fetch API 访问不同域名、端口或协议的资源。反向代理的作用在于通过 Nginx 服务器将这些来自不同源头的请求统一代理转发到同一域名下，使浏览器认为所有请求均来自同一源，从而避免跨域限制。

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

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

1. 登录宝塔面板，进入「网站」模块，找到需要配置反向代理的网站。

2. 点击网站右侧的「设置」按钮，进入「反向代理」标签。

3. 选择「添加反向代理」，填写相关信息：

代理名称：自定义（如 proxy-api）。

目标URL：填写后端服务的地址（如 127.0.0.1:8080 或 api.）。

发送域名：默认 $host（或手动指定为后端服务的域名）。

4. 点击「提交」完成配置。

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

2. 在 server 块中添加反向代理规则。以将请求代理到本地 8080 端口的后端服务为例：

nginx

location /api/ {

proxy_pass 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";

3. 重启 Nginx 使配置生效。

三、配置示例说明

nginx

server {

listen 80;

location /api/ {

proxy_pass api.:8080/; 后端地址

proxy_set_header Host api.; 指定后端接收的域名

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 ;

}

其他配置...

四、反向代理与 CORS 头配置的比较

五、注意事项

1. 路径匹配规则：如前端请求路径为 /api/user，后端实际接口为 /user，可通过调整 proxy_pass 来匹配。

2. WebSocket 代理：如需代理 WebSocket，需添加 Upgrade 和 Connection 头。

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

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