先来了解一下什么是正向代理、反向代理？
正向代理在客户端和原始服务器(origin server)之间架设一个代理服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。
反向代理
反向代理（Reverse Proxy）方式是指以代理服务器来接受网络上的连接请求，然后将请求转发给内部网络上的服务器，并将服务器上得到的结果返回给请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。
在前后端分离的网站架构中，服务器经常要配置反向代理，使前端通过固定地址访问后端接口，这样后端服务可以采取负载均衡等性能优化措施，对前端应用透明。
假设前端服务器地址为：http://127.0.0.1:8080，后端实际服务地址为：http://server/web-service/userList ，由于涉及到跨域的问题，前端无法直接发http请求给此地址，只能发送同域下的api请求例如：http://127.0.0.1:8080/api/userList，通过上文介绍，我们了解到需要在前端服务器上配置反向代理，实现将api请求转发至后台服务器的目的。
nginx
如果采用nginx服务器，可以通过如下配置即可实现上述反向代理需求：
对于前端所有访问/api的请求，通过proxy_pass一项设置转发地址，通过proxy_set_header和proxy_cookie_path两项将将请求响应的cookie path从/web-service设置为/api。
vue-cli对于使用vue-cli脚手架搭建的工程而言，其实也不难，vue-cli采用http-proxy-middleware插件来进行代理服务器等各项配置。
首先，在config/index.js文件中可以利用预留的proxyTable一项，设置地址映射表。在上述例子中，只需做如下配置即可：
接下来还需将来自服务器响应的cookie path从/web-service改为/api，这里我们利用了一个名为cookiejar的第三方库，首先npm install cookiejar，在build/dev-server.js文件中引入cookiejar依赖，然后实现两个钩子函数relayRequestHeaders和relayResponseHeaders分别对请求和响应的Header进行处理，最后将钩子函数挂载到proxyMiddleware的options选项中。
至此就实现了我们的目的，大功告成！
http-proxy-middleware插件地址：
https://github.com/chimurai/http-proxy-middleware
vue-cli模板参数说明地址：
https://vuejs-templates.github.io/webpack/proxy.html
