proxyTable讲解

为什么要使用proxyTable

• 浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同
• 在平时项目的开发环境中，经常会遇到跨域的问题，尤其是使用vue-cli这种脚手架工具开发时，由于项目本身启动本地服务是需要占用一个端口的，所以必然会产生跨域的问题。在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。

如何使用proxyTable

还是拿之前使用过的vue-cli举例。我们首先要找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用，自然而然是要配置在dev里面：

dev: {
    
    
  ...
  proxyTable: {
    
    
    '/api': {
    
    
      target: 'http://www.abc.com',  // 目标接口域名
      changeOrigin: true,  // 是否跨域
      pathRewrite: {
    
    
        '^/api': '/api'   // 重写接口
      }
    }
   }
   ...
}

上面这段代码的效果就是将以/api字段起始的本地接口请求代理到了http://www.abc.com这一域名下：

'http://localhost:8080/api' ===> 'http://www.abc.com/api'

没有统一项目名下的使用

上面那种情况是有一个统一的项目名api的，所以说是比较好匹配的，就相当于说直接将以api开头的接口名代理一下换成目标域名访问就好了，可是如果说后台返给我们前端的接口没有了统一的项目名如何处理呢？

//先人为给接口地址前面加上一个自定义的项目名
let someApi = '/api' + '/xx/xx';

dev: {
    
    
  ...
  proxyTable: {
    
    
    '/api': {
    
    
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
    
    
        '^/api': '/'   //重写接口
      }
    }
  }
  ...
}

这里的项目名api是我们人为加上去的，经过代理之后就没了，这样我们在配置代理这里只需要配置一份就够了，只是在写接口地址时要注意区分开发环境和线上环境就可以了。

关于proxyTable的原理

同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。vue-cli的proxyTable用的是http-proxy-middleware中间件，该中间件本质上是在本地开了一个服务器dev-server，所有的请求都通过这里转发出去，即把浏览器的发送请求代理转发到代理服务器上，再由代理服务器发送请求给目标服务器，从而解决跨域问题。

遇到跨域问题的场景有很多，只要是做前端开发，总会遇到。解决方案也是多种多样，如jsonp、cors、websocket、nginx反向代理，也包括上面用到的node中间件代理，等等，各有差异。在实际开发中，更多是使用代理来避免同源策略。