axios的安装、跨域和使用

1.安装axios

cnpm install axios --save

2.在main.js添加

import Axios from 'axios'

Vue.prototype.$axios = Axios;


new Vue({
  el: '#app',
  Axios,
  components: { App },
  template: ''
})

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’即可
			}
		  }
		
	},

axios的安装、跨域和使用_第1张图片

(2)在main.js添加

import Axios from 'axios'

Vue.prototype.$axios = Axios;

Vue.prototype.Host='/api';

new Vue({
  el: '#app',
  Axios,
  components: { App },
  template: ''
})

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)
	
	})

 

你可能感兴趣的:(前端笔记,VUE)