在项目的根目录下创建一个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);
            })

        },
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐