Vue-cli 如何配置服务器反向代理
Posted 三小两前端studio
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue-cli 如何配置服务器反向代理相关的知识，希望对你有一定的参考价值。
先来了解一下什么是正向代理、反向代理？
在客户端和原始服务器(origin server)之间架设一个代理服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。
反向代理（Reverse Proxy）方式是指以代理服务器来接受网络上的连接请求，然后将请求转发给内部网络上的服务器，并将服务器上得到的结果返回给请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。
如果采用nginx服务器，可以通过如下配置即可实现上述反向代理需求：
对于使用vue-cli脚手架搭建的工程而言，其实也不难，vue-cli采用http-proxy-middleware插件来进行代理服务器等各项配置。
接下来还需将来自服务器响应的cookie path从/web-service改为/api，这里我们利用了一个名为cookiejar的第三方库，首先npm install cookiejar，在build/dev-server.js文件中引入cookiejar依赖，然后实现两个钩子函数relayRequestHeaders和relayResponseHeaders分别对请求和响应的Header进行处理，最后将钩子函数挂载到proxyMiddleware的options选项中。
至此就实现了我们的目的，大功告成！
https://github.com/chimurai/http-proxy-middleware
https://vuejs-templates.github.io/webpack/proxy.html
以上是关于Vue-cli 如何配置服务器反向代理的主要内容，如果未能解决你的问题，请参考以下文章
webpack进阶【19】: vue-cli 脚手架环境 反向代理服务器的配置
vue-cli下配置webpack的proxy参数进行反向代理
宝塔面板配置 vue生产环境和开发环境 反向代理---Nginx+Apache解决方案