Vue2反向代理

　  前一段时间写了一个vue2的小项目，用的是vue-cli脚手架搭建的项目，项目里须要跨域，但又不能使用jsonp，上网查了一下，发现有一个以前没接触过的词语——反向代理。

      什么是“反向代理”呢？

      首先咱们了解一下代理服务器。代理服务器分为两种：转发（forward proxy）代理服务器和反向（reverse proxy）代理服务器。咱们一般说的代理服务器指的就是转发代理服务器，转发代理服务器，转发代理服务器的工做原理是这样的：咱们在工做中有时须要访问外网，可是因为有一些咱们直接访问是访问不了的，因此代理服务器就上场了，它就像是一个转换器，客户端把本来要发送给服务器的请求发送给代理服务器，而后代理服务器再发送次请求到服务器并接收返回来的内容，最后将这些内容再发送给客户端，这就是转发代理服务器扮演的角色。除次以外，代理服务器还有一个做用，就是可以使用缓存来缓解原始服务器负载，提供响应速度。

　  一般的代理服务器，只用于代理内部网络对Internet的链接请求，客户机必须指定代理服务器,并将原本要直接发送到Web服务器上的http请求发送到代理服务器中。因为外部网络上的主机并不会配置并使用这个代理服务器，普通代理服务器也被设计为在Internet上搜寻多个不肯定的服务器,而不是针对Internet上多个客户机的请求访问某一个固定的服务器，所以普通的Web代理服务器不支持外部对内部网络的访问请求。当一个代理服务器可以代理外部网络上的主机，访问内部网络时，这种代理服务的方式称为反向代理服务。此时代理服务器对外就表现为一个Web服务器，外部网络就能够简单把它看成一个标准的Web服务器而不须要特定的配置。不一样之处在于，这个服务器没有保存任何网页的真实数据，全部的静态网页或者CGI程序，都保存在内部的Web服务器上。所以对反向代理服务器的攻击并不会使得网页信息遭到破坏，这样就加强了Web服务器的安全性。

　  了解了什么是反向代理，咱们再看看它是怎么在vue中设置。

　  在vue中的config/index中，设置proxyTable参数。以下：

　　

proxyTable: {
  '/api': {
    target: 'http://xxx.com',  //设置你调用的接口域名和端口号
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''   //这里理解成用‘/api1’代替target里面的地址，后面组件中咱们掉接口时直接用api代替 好比我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’便可
    }
  }
}

如上配置好proxyTable，在访问时，用api代替，如：我要调用'http://xxx:3002/user/add'，把proxyTable配置为target：'http://xxx:3002',访问时直接写‘/api/user/add‘便可

vue代理就是 http-proxy-middleware 插件完成的，若是想深刻了解，那就好好看看http-proxy-middleware吧。