devServer proxy的使用

webPack中proxy使用 官方文档

今天遇到一个项目中，服务那边使用的是roadhog阿里出品的打包工具 服务中配置了proxy 顺便看了一下proxy的文档。 记录一下;希望帮助到有需要的小伙伴吧；

当你拥有单独的API后端开发服务器并且希望在同一域上发送API请求时，代理某些URL可能会很有用。

1.正常使用

proxy: {
   '/api':{ // 这个是你要替换的位置
   target: 'http://www.baidu.com'//这个是被替换的目标地址
}

比如我们有一个接口请求为叫做 localhost:8081/api/query 那会将请求代理到http://www.baidu.com/api/query上面；
就是我们接口中有/api的字段 就会匹配到代理上面；

2. secure的使用

proxy: {
   '/api':{ // 这个是你要替换的位置
   target: 'http://www.baidu.com',//这个是被替换的目标地址
   secure:true //接受对方是https的接口
}

默认情况下 secure为false， 是不接受转发到https的接口的。 需要支持的话 配置成true即可

3. changeOrigin的使用

proxy: {
   '/api':{ // 这个是你要替换的位置
   target: 'http://www.baidu.com',//这个是被替换的目标地址
   secure:true ,//接受对方是https的接口
   changeOrigin:true // 是否需要跨域
}

是否需要支持跨域处理

4. pathRewrite的使用

proxy: {
   '/api':{ // 这个是你要替换的位置
   target: 'http://www.baidu.com',//这个是被替换的目标地址
   secure:true ,//接受对方是https的接口
   changeOrigin:true ,// 是否需要跨域
   pathRewrite: {'^/api' : ''}
}

通过名字就知道了 这个是路径重写的意思；如果我们接口中不需要/api的话 就可以通过这个进行重写
例子： 发起请求接口localhose:8081/api/query 进过代理的话 他调用的请求 就会被重写成 www.baidu.com/query 配置的/api 就没了；
初次学习使用 ；如有不对的地方欢迎指正；