## 安装axios 和 qs
qs ：qs是一个库。里面的stringify方法可以将一个json对象直接转为以?和&符连接的形式 自动化数据
> 安装qs ` npm install qs`
> 安装axios `npm i --save axios`
## 在mian.js中引入axios
```
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import qs from 'qs'
Vue.config.productionTip = false
Vue.prototype.axios = axios
Vue.prototype.qs = qs
//默认后台接口前缀
// axios.defaults.baseURL = 'http://10.10.10.114:8073'
//不填默认接口前缀为本地ip
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```
## 使用axios请求接口数据
```
this.axios.post("applet/selBanner", this.qs.stringify(param)).then(res => {
console.log(res);
});
```
## 跨域
在文件vue.config.js 中配置代理
```
devServer: {
// host: 'localhost',
// port: 8020,
// https: false,
// hotOnly: false,
// open: true,
"disableHostCheck":true,
proxy: {
'/api': {
target: 'http://10.10.10.114:8073', //跨域地址
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
},
```
在文件mian.js中设置baseURL
```
axios.defaults.baseURL = '/api/'
```
### 跨域请求思路
> 实际显示请求为 本地地址 + /api/ + 接口 http://10.10.10.108:8080/api/applet/selBanner
> 事实上 http://10.10.10.108:8080/api 被解析成了配置的target地址 http://10.10.10.114:8073
> 真正上请求地址为 http://10.10.10.114:8073/applet/selBanner
