使用vue-cli构建工具构建的vue项目中,在config/index.js中的proxyTable中添加
"/api":{
target: 'http://api.douban.com/v2/', //你要请求的后台接口
changeOrigin: true,
pathRewrite: {
'^/api': ' ',
}
}
且早main.js中添加axios.defaults.baseURL="/api";
然后在你要请求的组件页面上将你的axios请求写出如下:
getData(){
this.$ajax({method: 'get',url: '/movie/in_theaters'
}).then((res)=>{
console.log(res.data)
}).catch((error)=>{console.log(error)})
}
//此处有个问题,我在网上查看说会将url改成/api/movie/in_theaters
但是我在请求接口的时候会可以查看到请求的是http://localhos:8080/api/api/movie/in_theaters
明显是添加了两个api造成出错
2.最开始学用axios第三方插件的时候,我们知道哪个组件用到就在哪个组件页面引入import axios from 'axios',这样我们需要到处引用,因此我们可以在main.js将axios添加到vue中原型上,
import axios from 'axios';
Vue.prototype.$ajax=axios