vue-cli中跨域问题解决方法

webpack提供了配置代理的方法解决跨域

1 在vue-cli项目中打开webpack.dev.cof.js，如下

2 打开conifg目录下的index.js，在 proxyTable中进行配置

proxyTable: {
        '/api': {
            target: 'http://192.168.10.202:8080/',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,
            pathRewrite: {
              '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
            }
        }
},

proxyTable: {
        '/api': {
            target: 'http://192.168.10.202:8080/',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,//设置true 代表跨域访问
            secure: false,  // 如果是https接口，需要配置这个参数
            pathRewrite: {
              '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
            }
        }
},               

3 配置好后，就可以获取后台提供的接口，然后进行页面的渲染了

 this.$http.get('/api/user/add')
 .then(res=>{
            console.log(res);
 }).catch(err=>{
            console.log(err);
 });