pathRewrite是使用proxy进行代理时,对请求路径进行重定向以匹配到正确的请求地址
未添加pathWrite时:
proxy: {
'/csdn': {
target: 'https://blog.csdn.net',
changeOrigin: true
}
}
现在想请求CSDN中某一个页面的某个接口,配置代理如上,请求代码附上
axios.get("/csdn/u014427391/article/getSideArticles?
pageindex=3&articleId=84980219&length=20")
.then(function(response) {
console.log(response);
});
使用axios进行请求。实际上,我们要请求的接口地址是:“https://blog.csdn.net/u014427391/article/getSideArticles?pageindex=3&articleId=84980219&length=20”
配置代理"/csdn"对应的target为:"https://blog.csdn.net",那么没有使用pathRewrite进行路径重定向时,加入我们像上述axios的代码那样进行请求时,代码中的GET请求是 "/csdn/u014427391/article/getSideArticles?pageindex=3&articleId=84980219&length=20"
由于proxy的配置,此请求会被代理成"https://blog.csdn.net/csdn/u014427391/article/getSideArticles?pageindex=3&articleId=84980219&length=20"。
可以看出请求地址中多了个"/csdn",此时浏览器会报404错误,此时我们就需要用到pathRewrite重定向功能。
所以需要去掉请求路径中多余的"/csdn",此时我们就需要用到pathRewrite进行路径的重定向了。直接上代码如下:
proxy: {
'/csdn': {
target: 'https://blog.csdn.net',
changeOrigin: true,
pathRewrite: {
'^/csdn': '/'
}
}
}
加了路径的重定向代码pathRewrite,上述代码以正则匹配规则将以"/csdn"开头的请求地址修改为"",也就是说,我们这样配置后,当我们请求"/csdn/abc"的时候,会被重写为请求"/abc",直接在请求地址中将"/csdn"变成了""