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吧。