#一.三種安裝方式(任選其一)
1. $ npm install axios
2. $ bower install axios
3. 在index.html里面加入 < script src = "https://unpkg.com/axios/dist/axios.min.js" > < /script>
#二.接口跨域請求
修改index.js文件
proxyTable: {
? ? '/api': {
? ? ? ? target: 'https://ladybird.awservice.net/api', // 接口的域名
? ? ? ? changeOrigin: true, // 是否跨域
? ? ? ? pathRewrite: {
? ? ? ? ? ? '^/api': ''
? ? ? ? }
? ? }
}
如需添加多個, 則用逗號隔開
proxyTable: {
? ? '/api': {
? ? ? ? target: 'https://ladybird.awservice.net/api',
? ? ? ? changeOrigin: true,
? ? ? ? pathRewrite: {
? ? ? ? ? ? '^/api': ''
? ? ? ? }
? ? },
? ? '/router': {
? ? ? ? target: 'https://ladybird.awservice.net/router',
? ? ? ? changeOrigin: true,
? ? ? ? pathRewrite: {
? ? ? ? ? ? '^/router': ''
? ? ? ? }
? ? }
}
修改完以后重新運行 npm run dev
#三.main.js設(shè)置如下
// 引入axios
import axios from 'axios'
//? 創(chuàng)建基本的axios配置
var $http = axios.create({});
例: 在header中設(shè)置token, 代碼如下
var $http = axios.create({
? ? headers: {
? ? ? ? 'token': localStorage.getItem('token')
? ? }
});
// 掛載到vue的原型
Vue.prototype.$http = $http;
#四.發(fā)送請求
var param = {
? ? 'loginName': 'ayumi',
? ? 'psw': '8888'
};
this.$http.post('/api/customer/sendMsg', param).then(function(res) {
? ? console.log(res);
})
