vue3.0 配置跨域

在项目的根目录下创建一个vue.config.js：

vue.config.js:

module.exports = {
    devServer: {
        port: 8023, // 端口
        proxy: {
            '/api': { //请求路径关键字
                target: 'http://localhost:8024/management/', //对应自己的接口
                changeOrigin: true,//是否允许跨域,在本地会创建一个虚拟服务端，然后发送请求的数据，
                                    // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                ws: true,
                pathRewrite: {
                    '^/api': ''      //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替
                                        // 比如我要调用'http://localhost:8024/management/user/add'，直接写‘/api/user/add’即可
                }
            }
        }
    },
    // lintOnSave: false // 取消 eslint 验证
}

跨域页面使用：

created() {
            //这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。
            //一般可以在created函数中调用ajax获取页面初始化所需的数据。
            axios.get('/api/student/queryUser/1/4').then((resp) => {
                console.log(resp.data)
                this.student = resp.data.studentList
                this.total = resp.data.total
                this.size = resp.data.size
                console.log(this.student);
            })

        },