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

发布时间:2022-08-19 12:34

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

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

Vue获取后端数据,跨域问题_第1张图片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);
        });
    }
}

 

Vue获取后端数据,跨域问题_第2张图片

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

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

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号