VUE-AXIOS及其跨域处理

一、安装axios

npm install axios vue-axios --save;

二、在main.js中引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'


import Axios from 'axios'
Vue.prototype.$axios = Axios;
Vue.prototype.Host='/api';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  Axios,
  components: { App },
  template: '<App/>'
})

三、在index.js文件

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

 四、进行调用

methods: {
          getData: function() {
            	let apiUrl=this.Host+'/abcd';
            	// 视频预览
            	this.$axios({
            	url: apiUrl,
            	method: 'GET',
            	params: {
            		// id:1
            	},
            	}).then( res => {
            		console.info(res)
            	}).catch( e => {
            		console.log(e)
            	})
          },
  }