axios的安装、跨域和使用

axios的安装、跨域和使用

1.安装axios

cnpm install axios --save

1
2.在main.js添加

import Axios from 'axios'
 
Vue.prototype.$axios = Axios;
 
 
new Vue({
  el: '#app',
  Axios,
  components: { App },
  template: '<App/>'
})

3.axios解决跨域问题
（1）在config文件夹下的index.js页面修改配置

proxyTable: {
		'/api': {
			target: 'http://61.164.49.122:8083',//设置你调用的接口域名和端口号 别忘了加http
			changeOrigin: true,
			pathRewrite: {
			  '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
			}
		  }
		
	},

（2）在main.js添加

import Axios from 'axios'
 
Vue.prototype.$axios = Axios;
 
Vue.prototype.Host='/api';
 
new Vue({
  el: '#app',
  Axios,
  components: { App },
  template: '<App/>'
})

4.在vue页面中使用axios

let apiUrl=this.Host+'/video/list';
 
// 视频预览
this.$axios({
url: apiUrl,
method: 'GET',
params: {
	id:1
},
}).then( res => {
 
	console.info(res)

}).catch( e => {
	console.log("4444")	
	console.log(apiUrl+'/video/list')
	console.log(e)

})