最近使用iview admin進行后臺開發(fā)赦拘,做到與后臺進行數(shù)據(jù)交互時,碰到跨域的問題芬沉,折騰了好久才解決躺同。
現(xiàn)在這里記錄一下,加深印象
解決步驟:
一丸逸、修改iview admin配置文件webpack.base.config.js
module.exports = { //在這里添加devServer配置
...,
devServer: {
proxy: {
'/api': {
target: 'http://192.168.0.1:8080/', //后臺服務器的ip地址
pathRewrite: { '^/api': '/' },
changeOrigin: true
}
}
}
}
二蹋艺、正常調(diào)用即可
axios({
url: '/api/bak/country.su', //測試地址
method: 'POST',
params: {
eb_name: 'test'
},
responseType: 'json'
}).then((res) => {
console.log(res);
}).catch((res) => {
console.log(res);
});
另外,可以預先配置axios的url參數(shù)黄刚,這樣在編譯后就無需再做修改
const axiosUrl = env === 'development'
? 'http://localhost:8080/'
: 'http://192.168.0.1:8080'
const $axios = axios.create({
baseURL: axiosUrl,
timeout: 30000
});
//之后使用實例化的$axios進行異步調(diào)用