vue 设置proxyTable解决跨域问题

最近接收一个前后端分离的项目，本地环境启动之后总是报跨域问题：

image.png

经过一番费劲心思的排查，发现是浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同，proxyTable通过代理可以解决这个问题。
在config目录下的index.js设置

dev: {
  ...
  proxyTable: {
    '/api': {  // 这里的/api表示前端项目的根目录
      target: 'http://localhost:8081',  // 目标接口域名
      changeOrigin: true,  // 是否跨域
      pathRewrite: {
        '^/api': '/api'   // 重写接口，将以/api开头的前端请求如：localhost:3000/api/xxx
                          //改成后端请求，如后端端口为8081，则为localhost:8081/api/xxx 
      }
    }
   }
   ...
}

上方配置的目的就是将前端请求localhost:3000/api/xxx 代理为localhost:8081/api/xxx