vue-cli 前端服务器代理 proxyTable配置解决跨域

proxyTable是什么

在使用 vue init webpack my-project-vue 创建vue 项目时在config目录下的 index.js 文件有一个proxyTable配置

proxyTable是vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxy-middleware，它是http代理中间件，它依赖node.js，基本原理是用服务端代理解决浏览器跨域。
有时候在开发的时候,我们请求的后台接口和vue不在同一个域名产生了跨越,而后台服务器并未开启 cors，这个时候需要配置proxyTable解决跨域问题。

如何配置

比如我要访问的后台接口为 http://172.xx.xx.xx:8888/api/map

// proxyTable配置  
proxyTable: {
      // 这里配置的 '/api' 就等于 target , 在链接里访问 /api 等同于 http://172.xx.xx.xx:8888/
      '/api': {
        target: 'http://172.xx.xx.xx:8888/', // 服务器的接口地址
        secure: true, // 如果是 https ,需要开启这个选项
        changeOrigin: true, // 是否是跨域请求？ true.
        pathRewirte: {
          // 如果真实接口里包含了 /api,就需要这样配置.
           // 等价于 /^api = /api + api ==http://172.xx.xx.xx:8888/api
          '/^api': 'api/', 
        }
      }
     },