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

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

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

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

ws用于支持websockets

devServer中,proxy的changeOrigin是false:请求头中host仍然是浏览器发送过来的host;如果设置成true:发送请求头中host会设置成target。

在vue-cli3中,默认changeOrigin的值是true,意味着host设置成target,这与cue-cli2不一致,vue-cli2这个默认值是false

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐