Vue.js HTTP请求代理配置

Vue.js使用axios向服务器请求数据时,经常报跨域错误

1
'Access-Control-Allow-Origin' header is present on the requested resource

解决方法:配置代理

config/index.jsproxyTable添加

1
2
3
4
5
6
proxyTable: {
'/api': { // 要代理的接口名
target: 'http://192.168.1.1:8080/', // 要代理的接口地址
changeOrigin: true, // 允许跨域
pathRewrite: { '^/api': '' } // 接口名重写
},

然后在main.js中声明一个全局

1
Vue.prototype.HOST = '/api'

即可在组件中使用

1
2
3
4
5
6
7
8
9
10
11
var url = this.HOST + "/user?";
this.$axios.get(url, {
params: {
name: this.name, //上传参数到服务器
id: this.id
}
}).then(res => {
var a =res.data.code;
console.log(a); //从服务器取得数据res,这里我们需要data里面的code
})
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :