宝塔面板使用Nginx反向代理解决跨域问题，超简单！！

SoSalty

已于 2024-03-06 13:50:29 修改

阅读量2.5w

点赞数 17

分类专栏：前端文章标签：服务器 nginx

于 2022-07-03 01:13:18 首次发布

本文链接：https://blog.csdn.net/SoSalty/article/details/125580039

版权

前端专栏收录该内容

12 篇文章

订阅专栏

至于跨域的概念，云服务器、域名的购买，宝塔面板的安装等等就不再过多赘述，有不清楚的可以看看别的教程~

步入主题——

目标：请求http://api.xxxxxx.com/userinfo获取数据

1.打开面板，点击右侧网站，点击设置：

2.点击右侧反向代理，点击添加反向代理：

3.（1）开启高级功能；

（2）填写代理名称（方便记忆即可）；

（3）代理目录（后面请求时用来代替baseURL）；

（4）目标URL（请求接口的baseURL ），填好后发送域名会自动填充好

（5）点击提交

4.最后在请求的时候使用/apis/作为baseURL就完成了！，如：

axios.get('/apis/userinfo')

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SoSalty

关注关注

17
点赞
踩
55

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Nginx 反向代理解决跨域问题

专注基础架构领域

05-25

2297

宝塔部署Vue项目解决跨域问题

niulinbiao的博客

09-07

1642

使用宝塔面板部署前端后端项目相比用命令行进行部署要简单许多，宝塔的可视化操作对那些对Linux不熟悉的人很友好。1、视频教程2、文字教程13、文字教程2以上的教程完全可以按照步骤一步一步进行部署，但是部署过程中，会遇到很多问题，例如前端的跨域问题，本文在遇到上述问题并解决后，特此记录一下。

3 条评论您还未登录，请先登录后发表或查看评论

云服务器安装宝塔并部署 Nginx（前端 + 反向代理）

weixin_70845865的博客

03-28

933

1.云服务器安装宝塔 2..云服务器配置（Docker 部署后端） 3.云服务器通过宝塔部署Nginx（前端 + 反向代理）

宝塔面板怎么解决nginx跨域问题

风止的博客

05-12

2237

宝塔有一点不同，nginx配置文件不在nginx的安装目录中，应当去/www/server/panel/vhost/nginx找到。1.找到宝塔的nginx配置文件。2.添加你要跨域的地址。

宝塔配置反向代理解决跨域问题

chen110710的博客

03-10

1246

宝塔面板解决跨域

solocao的专栏

03-16

7899

1、找到宝塔面板配置nginx文件的地方 2、增加如下代码 add_header Access-Control-Allow-Origin '*'; add_header Access-Control-Allow-Methods 'POST,PUT,GET,DELETE'; add_header Access-Control-Allow-Headers 'version, access-token, user-token, Accept, apiAuth, User-Agent, Keep-Alive, .

宝塔面板网站解决跨域问题

软希网分享源码的博客

11-12

6809

宝塔面板网站解决跨域问题

如何将vue项目打包在服务器上使用nginx运行，并使用反向代理解决跨域问题

m0_67390379的博客

07-30

466

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。可以改用其他端口，但是改用其他端口不方便，因为使用域名访问的话默认就是80端口，所以我们要让nginx启动在80端口，把占用80端口的程序干掉就行了。打开配置文件可以发现，里面又一个一个的server对象组成（如下），我们每次增加一个项目增加一个server就行。...

Nginx反向代理实例解决前端跨域、前后端分离问题

szss2a的专栏

06-30

840

1.定义跨域是前端开发中经常会遇到的问题，业务需求前后端分离问题，前端调用后台服务时，通常会遇到 No 'Access-Control-Allow-Origin' header is present on the requested resource的错误，这是因为浏览器的同源策略拒绝了我们的请求。所谓同源是指，域名，协议，端口相同，浏览器执行一个脚本时同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。 ...

宝塔面板nginx配置反向代理

03-12

在宝塔面板中通过Nginx实现反向代理，能够有效地解决跨域访问等问题。具体操作如下：对于希望设置反向代理的目标站点，在宝塔面板首页点击右侧的“网站”，随后针对指定站点点击“设置”。进入设置界面后，选择...

利用nginx做反向代理解决前端跨域问题

一键写代码的博客

06-17

408

很简单,就是使用nginx做一个反向代理,不过这个需要后台人员协助处理.具体步骤: 1.在安装了nginx的服务器中找到nginx.conf文件里的server{},如果没有找到的话就到该文件同级的conf.d文件夹里面的default.conf文件. 2.在里面添加如下代码 { listen 80; server_name www.aaa.top; location / ...

使用宝塔部署H5,解决跨域问题

weixin_64639723的博客

05-15

672

1.在站点修改配置文件进行跨域。2. 在本地进行跨域问题解决。

宝塔Nginx配置反向代理后如何配置跨域？

csdn,码农

10-20

919

配置完成后，不重启Nginx也是可以用的，宝塔会自动重载配置。直接将 27行更换成如下配置即可上图有示例。

Nginx 反向代理（解决跨域）

专研技术的大学生

11-03

6544

Nginx反向代理解决跨域。

nginx 配置跨域，反向代理

LRF200307的博客

07-15

422

我用的宝塔，直接图像化修改配置即可，其他方式部署的话修改部署的 nginx.conf 文件即可。

宝塔面板网站解决跨域安全问题

热门推荐

运维菜

01-13

1万+

以下操作适用于默认80端口转其他地址非80端口情况。添加网站注意:因我只是拿来当反向代理来使用，所PHP为纯静态模式。开启反向代理 注：目标URL为最终目的地，发送域名为默认，如设置后无效则修改为上图中所示。修改反向代理配置文件说明: 修改反向代理的配置，不是修改nginx默认配置文件，修改上图中的proxy_pass这一行参数，在原来的目标地址后加上:1...

宝塔nginx代理https

03-26

### 配置宝塔面板中 Nginx 的 HTTPS 反向代理 要在宝塔面板中设置 Nginx 的 HTTPS 反向代理，可以按照以下方法完成配置： #### 1. 安装并启用 SSL 证书如果需要使用 HTTPS 协议，则必须先申请并安装 SSL 证书。可以通过宝塔面板内置的功能来快速申请免费的 Let's Encrypt 证书[^4]。 - 登录到宝塔面板，在左侧菜单栏选择 **网站**。 - 找到目标站点，点击右侧的 **设置** 按钮。 - 进入 **SSL** 设置页面，选择合适的证书类型（推荐 Let's Encrypt），然后点击 **申请证书** 并绑定到该域名下。 #### 2. 修改 Nginx 配置文件进入宝塔面板中的 **网站 -> 设置 -> 配置文件** 页面，手动编辑 Nginx 配置以支持反向代理功能。以下是标准的 HTTPS 反向代理配置模板： ```nginx server { listen 443 ssl; server_name yourdomain.com; # SSL 配置部分 ssl_certificate /path/to/certificate.crt; ssl_certificate_key /path/to/private.key; # 转发规则 location / { proxy_pass https://target-domain-or-ip:port/; 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 Upgrade $http_upgrade; # 支持 WebSocket proxy_set_header Connection "Upgrade"; # 支持 WebSocket proxy_http_version 1.1; # 使用 HTTP/1.1 版本协议 } # 处理静态资源缓存 location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ { expires 7d; access_log off; } } ``` 上述代码片段展示了如何通过 `location` 块实现基本的 HTTPS 反向代理，并且包含了对 WebSocket (`wss`) 的支持以及静态资源的优化处理[^1]。 #### 3. 开放必要的端口为了确保外部能够访问被代理的服务，需确认防火墙已允许相关端口通行。这不仅涉及本地服务器上的端口开放，还可能包括云服务商的安全组策略调整。 - 在宝塔面板里依次点击 **安全 -> 添加放行端口** 来开启所需的 TCP 或 UDP 端口号。 - 如果是在阿里云、腾讯云等平台部署的应用程序，请同步前往对应控制台添加相应的出入方向规则。 #### 4. 测试与验证保存更改后的 Nginx 配置之后重启服务生效。接着利用浏览器或者命令行工具测试连接情况是否正常工作。 --- ### 注意事项 - 当前示例假设所有流量都经过 `/` 路径转发给后台服务器；实际应用当中可以根据业务需求自定义更复杂的匹配模式。 - 对于某些特殊场景比如跨域资源共享(CORS)，还需要额外考虑 Access-Control-Allow-Origin 等头部字段设定[^5]。