iview admin下,使用axios进行跨域请求的解决方案

最近使用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进行异步调用

你可能感兴趣的:(iview admin下,使用axios进行跨域请求的解决方案)