前端vue：经过proxy反向代理解决跨域的配置

vue.config.js

// 开启反向代理
    devServer: {
        open:true,
        host:'localhost',
        port: 8080, // 端口
        https:false,
        hotOnly:false,
        // 经过反向代理解决跨域设置
        /**
         * @description:
         *          讲解举例：用‘/api'代替target里面的地址，后面组件中咱们掉接口时直接用api代替；
         *          好比：须要请求接口：https://www.easy-mock.com/api/rest/login ；只须要调用/api/rest/login
         *                axios.post("/api/rest/login",params)
         * */
        proxy: {
         // 配置跨域

            '/api':{
                //target:'https://www.easy-mock.com', // 设置代理
               // target:'https://vuets-api.herokuapp.com/api/',
                target:'http://10.10.29.26:8882',  // 代理的接口域名以及端口号；
                ws:true,   // 支持ws协议；websocket的缩写；
                changeOrigin:true,// 是否跨域
                pathRewrite:{     // 路径替换
                    '^/api':''
                }
            }
        }
    }
复制代码

github: Vue-TypeScript项目示例