Vue脚手架,通过api获取后台数据

情况:api项目,vue项目都在本机运行,vue通过调用接口,获取数据

问题难点:牵涉到跨域问题

vue代码:点击按钮调用regist方法,获取http://192.168.1.233/api/bargain/list数据

methods: {
  regist:function() {
    //this.$http.get("http://192.168.1.233/api/register/register?mobile=" +this.mobile+"&password="+this.password);
   //this.$http.get("http://192.168.1.233/api/register/register",{params: {mobile: this.mobile,password: this.password}},{datatype:'json'}).then(successCallback, errorCallback);
   this.$http.get("/api/bargain/list").then(function (res) {
      this.data1 = res.data.data.data;
   },function (res) {
     alert("shibai");
   });
  },
  login() {
    alert('登录成功!');
    this.thisuser=this.mobile;
  }

跨越:vue脚手架的config--index.js--proxyTable中添加

'/api': {
  target: 'http://192.168.1.233',//vue要请求的api地址
  changeOrigin: true,
  pathRewrite: {
    '^/api': '/api'//对应this.$http.get("/api/bargain/list")
  }
}

注意:跨越成功的结果

原本要访问的是http://192.168.1.233/api/bargain/list
实际访问的是http://vue项目的运行地址/api/bargain/list
相当于把所有的192.168.1.233上的api  同步到了vue所在的地址

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值