webpack之proxyTable设置跨域

为何要使用proxyTable

• 很简单，两个字，跨域。
• 在平时项目的开发环境中，常常会遇到跨域的问题，尤为是使用vue-cli这种脚手架工具开发时，因为项目自己启动本地服务是须要占用一个端口的，因此必然会产生跨域的问题。固然跨域有多种解决方式，这里就不一一例举，下次弄篇文章单独讲，在使用webpack作构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。

如何使用proxyTable

仍是拿以前使用过的vue-cli举例。咱们首先要在项目目录中找到根目录下config文件夹下的index.js文件。因为咱们是在开发环境下使用，天然而然是要配置在dev里面：

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/api'   //重写接口
      }
    },
  cssSourceMap: false
}

上面这段代码的效果就是将本地8080端口的一个请求代理到了http://www.abc.com这一域名下：

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

没有统一项目名下的使用

上面那种状况是有一个统一的项目名api的，因此说是比较好匹配的，就至关于说直接将以api开头的接口名代理一下换成目标域名访问就行了，但是若是说后台返给咱们前端的接口没有了统一的项目名呢？以前，我是一个个单独去作了转换，接口少还没什么关系，但多了确定是不现实的，前段时间在一次面试中受到了面试官的启发想到了这样一种取巧的方案：

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

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/'   //重写接口
      }
    },
  cssSourceMap: false
}

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

关于proxyTable的原理

我在网上查了一下，这个代理其实是利用http-proxy-middleware这个插件完成的，具体到这个插件的运行机制，因为是英文再加上能力有限就没深究了。但我想探究的是这种代理方式其实是如何作到的，我看网上有人说实际上就是咱们的本地服务器将请求转发给了目标服务器。之因此出现跨域是由于浏览器有同源策略的限制，但服务器是没有的，因此这种代理方式可以实现的机制大致就是：

本地服务器 --》 代理 --》目标服务器 --》拿到数据后经过代理假装成本地服务请求的返回值 ---》而后浏览器就顺利收到了咱们想要的数据

这是个人简单理解，按这个理解来讲的话只要服务器容许跨域，任何人都可以拿到它的数据吗？那样同源策略不就大大弱化了吗？目前对这个问题还不是太理解，但愿有想法的小伙伴留言指正！

参考文章

• webpack之proxyTable设置跨域
• vue-cli 配置 proxyTable 的问题，这样子是最佳解决方案吗？
• 详解Vuejs2.0 如何利用proxyTable实现跨域请求