Vue 解决跨域问题

本文章是我一个实习两个月的练习生，在项目中遇到的问题，在此记录，防治以后再踩坑！！

在vue项目中通过接口取后台数据时就会出现跨域问题:

在通过vue-cli创建项目时不会有vue.config.js文件,所以如果出现上面这个错误要自己手动添加vue.config.js文件。

vue.config.js:

module.exports = {
    // ...
    lintOnSave: false,
    devServer: {
        proxy: {
            '/api': {  
                target: 'http://123.13.238.19:55555/',   /*请求地址*/                
                changeOrigin: true,                      /*是否跨域*/
                ws: true,  
                pathRewrite: {    
                '^/api': ''  
                }
            },
        }
    }
}

添加完成后在请求接口时地址用api来代替就可以跨域访问啦：

this.$axios
    .get("api/role")
    .then(response => {
        this.tableData = response.data.result.rows;
    })
    .catch(response => {
        console.log(response.error);
    });
}

ps：在创建vue.config.js时一定要注意大小写！！！！，在深度系统对命名很严格，如果你的vue的V是大写它还是无法解决跨域，本人亲身经历！！，一定要注意命名！

希望大家遇到和我同样的问题时，这篇文章能帮你解决问题，喜欢的点赞哟ヾ(◍°∇°◍)ﾉﾞ