vue2.0项目中的代理跨域proxyTable

前端跨域很常见，最近用vue做项目，用webpack中的代理跨域proxyTable解决，非常完美。所以进行总结一下，避免自己遇到类似的问题。

我们先找到项目中的config目录下面的index.js，如下图所示

然后在index.js中写入下面的代码，进行代理处理

module.exports = {
  dev: {
    proxyTable: {
      '/getClubItems': {
        target: 'https://www.exaple.com',  // 接口域名
        secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/apis': ''   //需要rewrite的,
        }
      }
    }
}

然后我们最终就会代理到这个地址，我们在本地可以进行访问

https://www.exaple.com

然后我们在使用的时候，可以这样使用

goodsGetFirst: (obj) => {
    return get('/getClubItems', obj)
},

上面的代码是对axios的二次封装，大家可以不用理会。我们在config目录下面的index.js写了

/getClubItems

而我们使用的时候，就是直接用‘/getClubItems/obj’，这里的obj你可以写，你后面需要跟的路径，或者参数，这样我们就再也不用担心跨域的问题了。