前端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項目示例