Vue项目打包部署上线时devServer.proxy代理失效如何解决？使用nginx的proxy_pass 代理跨域转发_vue打包后代理请求失效-程序员宅基地

技术标签： # Vue 问题记录 vue.js

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是反向代理。

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

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

本文链接：https://blog.csdn.net/qq_45890970/article/details/123654674

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

艾美捷Epigentek DNA样品的超声能量处理方案-程序员宅基地

文章浏览阅读15次。空化气泡的大小和相应的空化能量可以通过调整完全标度的振幅水平来操纵和数字控制。通过强调超声技术中的更高通量处理和防止样品污染，Epigentek EpiSonic超声仪可以轻松集成到现有的实验室工作流程中，并且特别适合与表观遗传学和下一代应用的兼容性。Epigentek的EpiSonic已成为一种有效的剪切设备，用于在染色质免疫沉淀技术中制备染色质样品，以及用于下一代测序平台的DNA文库制备。该装置的经济性及其多重样品的能力使其成为每个实验室拥有的经济高效的工具，而不仅仅是核心设施。

11、合宙Air模块Luat开发：通过http协议获取天气信息_合宙获取天气-程序员宅基地

文章浏览阅读4.2k次，点赞3次，收藏14次。目录点击这里查看所有博文本系列博客，理论上适用于合宙的Air202、Air268、Air720x、Air720S以及最近发布的Air720U（我还没拿到样机，应该也能支持）。先不管支不支持，如果你用的是合宙的模块，那都不妨一试，也许会有意外收获。我使用的是Air720SL模块，如果在其他模块上不能用，那就是底层core固件暂时还没有支持，这里的代码是没有问题的。例程仅供参考！..._合宙获取天气

EasyMesh和802.11s对比-程序员宅基地

文章浏览阅读7.7k次，点赞2次，收藏41次。1 关于meshMesh的意思是网状物，以前读书的时候，在自动化领域有传感器自组网，zigbee、蓝牙等无线方式实现各个网络节点消息通信，通过各种算法，保证整个网络中所有节点信息能经过多跳最终传递到目的地，用于数据采集。十多年过去了，在无线路由器领域又把这个mesh概念翻炒了一下，各大品牌都推出了mesh路由器，大多数是3个为一组，实现在面积较大的住宅里，增强wifi覆盖范围，智能在多热点之间切换，提升上网体验。因为节点基本上在3个以内，所以mesh的算法不必太复杂，组网形式比较简单。各厂家都自定义了组_802.11s

线程的几种状态_线程状态-程序员宅基地

文章浏览阅读5.2k次，点赞8次，收藏21次。线程的几种状态_线程状态

stack的常见用法详解_stack函数用法-程序员宅基地

文章浏览阅读4.2w次，点赞124次，收藏688次。stack翻译为栈，是STL中实现的一个后进先出的容器。要使用 stack，应先添加头文件include<stack>，并在头文件下面加上“ using namespacestd;"1. stack的定义其定义的写法和其他STL容器相同, typename可以任意基本数据类型或容器：stack<typename> name;2. stack容器内元素的访问..._stack函数用法

2018.11.16javascript课上随笔（DOM）-程序员宅基地

文章浏览阅读71次。<li> <a href = "“#”>-</a></li><li>子节点：文本节点（回车），元素节点，文本节点。不同节点树：　　节点（各种类型节点）childNodes:返回子节点的所有子节点的集合，包含任何类型、元素节点（元素类型节点）：child。node.getAttribute(at...

随便推点

layui.extend的一点知识第三方模块base 路径_layui extend-程序员宅基地

文章浏览阅读3.4k次。//config的设置是全局的layui.config({ base: '/res/js/' //假设这是你存放拓展模块的根目录}).extend({ //设定模块别名 mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名 ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录}); //你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）layui.exten_layui extend

5G云计算：5G网络的分层思想_5g分层结构-程序员宅基地

文章浏览阅读3.2k次，点赞6次，收藏13次。分层思想分层思想分层思想-1分层思想-2分层思想-2OSI七层参考模型物理层和数据链路层物理层数据链路层网络层传输层会话层表示层应用层OSI七层模型的分层结构TCP/IP协议族的组成数据封装过程数据解封装过程PDU设备与层的对应关系各层通信分层思想分层思想-1在现实生活种，我们在喝牛奶时，未必了解他的生产过程，我们所接触的或许只是从超时购买牛奶。分层思想-2平时我们在网络时也未必知道数据的传输过程我们的所考虑的就是可以传就可以，不用管他时怎么传输的分层思想-2将复杂的流程分解为几个功能_5g分层结构