说明:这里的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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐