Vue-cli之http请求代理

现在流行前后台分离开发，就是前端先前端的页面，后端写后端的接口。但是，当两者的工作合并的时候，要么前端自己搭建一个服务器，要么后端开启跨域让前端访问接口，我一般在开发的时候采用的是后者。但是这个是很坑的，经常出现无法跨域的错误。

Vue-cli中自带了代理，当你配置了这个代理之后，你访问他人电脑的接口的时候，就像访问自己本机的接口一样，避免了跨域的问题。

首先找到，config下面的index.js，然后，打开，关键代码如下：

dev: {
  env: require('./dev.env'),
  port: process.env.PORT || 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/Home' : {
      target: 'http://localhost:9494',
      changeOrigin: true,
    },
    "/api":{
      target: 'http://localhost:9494',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '/'
      }
    }
  },
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
}

target就是要代理到的目标地址，changeOrigin的意思相比不必多说了。至于pathRewrite，就是在这个例子中，比如/Home/Index就会映射到http://localhhost:9494/Home/Index,

而如果开启了这个选项，比如第二个，假设/api/Home/Index,则会映射到http://localhost:9494/Home/Index。

说明：我的vue-cli所在的端口是localhos:8080