Vue三步完成跨域请求

时间:2023-03-09 08:58:37
Vue三步完成跨域请求

三步完成跨域请求

  ①main.js中: Vue.prototype.HOME = '/api';
  ② config/index.js中:

module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target:'https://www.baidu.com',
changeOrigin:true,
     pathRewrite:{
'^/api':'/api'
}
}
},
......
}

  主要是proxyTable的修改。

  ③GET请求:

axios({
method:'get',
     url:this.HOME,
}).then(function(resp){
console.log(resp.data);
}).catch(resp=>{
console.log("请求失败"+resp.status+resp.statusText);
});

  ④POST请求

      let data = new FormData();
data.append('uname','xiaowanzi');
data.append('pwd','123456');
axios.post(this.HOME+'/card/sysUserController/isUser.do',data)
.then(res=>{
this.loading = false;
console.log('res=>',res);
this.$router.push({ path: this.redirect || '/' });
},error=>{
this.loading = false;
this.$message.error(error);
console.log('error=>',error);
}