Vue项目打包部署上线时devServer.proxy代理失效如何解决?使用nginx的proxy_pass 代理跨域转发

Vue项目打包部署上线时devServer.proxy代理失效如何解决?使用proxy_pass 代理跨域转发

前言

本篇文章用于记录项目前端部署上线遇到的问题,包含对问题的思考、解决思路,以及从中获得的收获。正确的部署流程我也写了一篇文章,供大家参考使用宝塔将Vue2+Nodejs全栈项目打包部署到腾讯云服务器(2022最新版保姆级详细教程)

如果文章有歧义,请各位大佬指出,避免误导更多的人!!


正文

最开始,我天真的将devServer.proxy中的代理地址改成了服务器地址,然后就执行了npm run build打包dist文件,将其部署上线。

devServer: {
  proxy: { // 配置跨域'/api': {
​      target: 'http://xxx.xxx.xxx.xxx:8889/api/',
​      changOrigin: true,
​      pathRewrite: {'^/api': ''}}
  },
 }

开开心心打开网页登录,发现根本跳转不了,报错如下。
在这里插入图片描述
为什么会报错呢?

因为在vue.config.js中配置的devServer.proxy只是在开发环境下将请求代理到后端服务器的本地服务,我们把项目打包成dist文件只把我们的组件等资源打包了,并不会将代理服务器给打包,所以项目中的请求路径不完整导致访问不到对应资源

怎么解决这个问题呢? 资源要被访问,那必然还是需要有另一个代理来装载它。我们部署上线最常见的就是使用proxy_pass 代理跨域转发! 只需要修改配置文件即可,添加proxy_pass即可,xxx.xxx.xxxx.xxx表示你的服务器地址,8889是我后端的访问端口。
在这里插入图片描述

location ^~/api/ {
     proxy_pass http://xxx.xxx.xxx.xxx:8889/api/;
 }

以上,问题已经解决。


这里再补充一些正向代理反向代理的知识

Nginx是俄罗斯人Igor Sysoev编写的轻量级Web服务器,它不仅是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/SMTP 代理服务器。

那么什么是反向代理服务器呢?以下内容来自百度百科

反向代理服务器位于用户与目标服务器之间,但是对于用户而言,反向代理服务器就相当于目标服务器,即用户直接访问反向代理服务器就可以获得目标服务器的资源。 同时,用户不需要知道目标服务器的地址,也无须在用户端作任何设定。反向代理服务器通常可用来作为Web加速,即使用反向代理作为Web服务器的前置机来降低网络和服务器的负载,提高访问效率。

等等?这听着是不是和devServer.proxy的作用很像。但实际上,它们不是一类代理: devServer.proxy是正向代理,nginx是反向代理。

虽然正向代理服务器和反向代理服务器所处的位置都是客户端和真实服务器之间,所做的事情也都是把客户端的请求转发给服务器,再把服务器的响应转发给客户端,但是二者之间还是有一定的差异的。以下截图来源于终于有人把正向代理和反向代理解释的明明白白了!非常推荐大家去看看,讲的非常详细!!!
在这里插入图片描述


如果你觉得本篇文章对你有用,记得收藏、点赞!!

  • 24
    点赞
  • 79
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

焦妮敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值