vue跨域配置
此处的vue代理是指用vue静态服务器做代理。使用的是http-proxy-middleware这个模块
·
说明:这里的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
更多推荐
已为社区贡献2条内容
所有评论(0)