[VUE] vue配置反向代理解决跨域

正向代理与反向代理

正向代理： 在客户端和原始服务器(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请求转发至后台服务器的目的。

实现

配置：config/index.js中的proxyTable

dev{
	proxyTable: {
      '/api': {
        target: 'http://192.168.0.1:200', // 要代理的域名
        changeOrigin: true,//容许跨域
        pathRewrite: {
          '^/api': '' // 这个是定义要访问的路径，名字随便写
        }
   }
}
复制代码

使用时：

// /api/getMenu至关于*http://192.168.0.1:200/getMenu
 // /api至关于http://192.168.0.1:200
 this.$http.get("/api/getMenu", {
 }
 .then(res => {
 })
 .catch(function(error) {
 });
复制代码

注意： 以上面代码设置的为例，会把请求中全部带有/api字段的都替换掉，例如api/getMenu/api，先后两个都会被替换，致使404等错误，在代理数量比较多的时候容易出现这个问题。

以上配置只是在开发环境（dev）中解决跨域。要解决生产环境的跨域问题,则在config/dev.env.js和config/prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST，开发环境中咱们用上面配置的代理地址api，生产环境下用正常的接口地址。配置代码以下：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',     //开发环境
  API_HOST:"/api/"
})
复制代码

module.exports = {
  NODE_ENV: '"production"',      //生产环境
  API_HOST:'"http://40.00.100.100:3002/"'
}
复制代码

原理

浏览器是禁止跨域的，可是服务端不由止，在本地运行npm run dev等命令时其实是用node运行了一个服务器，IP与后端不一致，因此会产生跨域问题，须要使用如JSONP、跨域代理等手段进行跨域请求，而vue已经帮咱们配置好了，只须要设置一下proxyTable就行。所以proxyTable其实是将请求发给本身的服务器，再由服务器转发给后台服务器，作了一层代理，由于不会出现跨域问题。

底层

vue-cli采用http-proxy-middleware插件来进行代理服务器等各项配置。