Vue获取后端数据，跨域问题

1、打开config下面的index.js，找到proxyTable，添加以下代码即可：

'/apis': {
    target: 'http://localhost',  // 接口域名
    changeOrigin: true,  //是否跨域
    pathRewrite: {
        '^/apis': ''   //这里会把path路径的【/apis】替换成空,
    }              
}

2、配置完之后需要重启下项目 npm run dev。重启之后，就可以调用，实现跨域了

 

3、

export default {
    name: 'Header',
    data(){
        return {

        }
    },
    created:function(){
        this.$http.get('/apis'+'你的api地址').then(function(response) {
            return response.json();
        }).then(function(data) {
            console.dir(data);//得到的数据
        }).catch(function(e) {
            console.dir(e);
        });
    }
}

 

4、为了方便打包后去除'/api',建议把'/api'设成全局，在main.js中添加 

 Vue.prototype.api = process.env.NODE_ENV === 'production' ? '' : '/apis' 

调用接口的时候的url就可以写成api + '接口地址'