1、打开config/index.js,在proxyTable中添写如下代码:
proxyTable: {
'/apis': { //使用"/api"来代替"http://f.apiplus.c"
// 测试环境
target: 'https://www.baidu.com/', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': 'https://www.baidu.com/' //需要rewrite重写的,
}
}
},
2、在main.js中配置以下如下代码:
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import qs from 'qs'
Vue.config.productionTip = false
Vue.prototype.$http = axios
Vue.prototype.$http = axios.create({
headers: {'Content-Type': 'application/json;charset=UTF-8'}, //后台需要格式配置
baseURL: '/apis', //开发环境请求地址
//baseURL: 'https://www.baidu.com/', //生产环境请求地址
transformRequest: [function (data) { //数据格式转换
data = JSON.stringify(data)
console.log(data)
return data
}]
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3、在项目中具体使用案例:
1.axios方式请求案例
this.$http.post('system/getCarInfo', {
"userId": "1001",
"usermane":"张小龙"
}).then((res) => {
console.log(res)
})
2.fecth方式请求案例
fetch("/apis/test/testToken.php", {
method: "POST",
headers: {
"Content-type": "application/json",
token: "f4c902c9ae5a2a9d8f84868ad064e706"
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => {
console.log(data);
});
网友评论