说明:这里的vue代理是指用vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块(这个模块相当于是node.js的一个插件)。

版本: vue-cli 3.0以上

修改文件位置:根目录下的vue.config.js

代码:

devServer: {
    proxy: {
        '/api': {
            target: 'http://192.168.123.123:8080',  // 后台接口地址
            ws: true,        //如果要代理 websockets,配置这个参数
            secure: false,  // 如果是https接口,需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite:{	// 重写路径
                '^/api':''
            }
        }
    }
}

vue项目里,我的所有接口的地址都是/api开头的,所以前面用 ‘/api’
例如:我的请求地址 /api/xxxx/xxx
当node服务器 遇到 以 ‘/api’ 开头的请求,就会把 target 字段里的值加上,那么请求地址就为变成了http://192.168.123.123:8080/api/xxxx/xxx

pathRewrite 表示的意思是 把/api 替换为 空,那么请求地址就为 http://192.168.123.123:8080/xxxx/xxx

注意2:在本地查看地址的时候,地址不会更改,还是http://localhost:8090/api/xxx/xxxxx,看起来/api和target的地址没有替换,但实际已经替换了。

看到一些其他网友说过pathRewrite没有效果的问题,我暂时还没遇见,都通了,有时候查一查看看是不是提交的方法问题,比如 get 和 post 没区分开。

Logo

前往低代码交流专区

更多推荐