跨域 nginx反向代理proxy未添加pathRewrite导致的404问题

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"变成了""