最近使用iview admin进行后台开发,做到与后台进行数据交互时,碰到跨域的问题,折腾了好久才解决。
现在这里记录一下,加深印象
解决步骤:
一、修改iview admin配置文件webpack.base.config.js
module.exports = { //在这里添加devServer配置
...,
devServer: {
proxy: {
'/api': {
target: 'http://192.168.0.1:8080/', //后台服务器的ip地址
pathRewrite: { '^/api': '/' },
changeOrigin: true
}
}
}
}
二、正常调用即可
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参数,这样在编译后就无需再做修改
const axiosUrl = env === 'development'
? 'http://localhost:8080/'
: 'http://192.168.0.1:8080'
const $axios = axios.create({
baseURL: axiosUrl,
timeout: 30000
});
//之后使用实例化的$axios进行异步调用