Nginx中proxy_pass的斜杠问题(最详细讲解)

目录

1、proxy_pass的类型

2、不带URI方式列举说明

2.1、不带URI方式(例1)

2.2、不带URI方式(例2)

3、带URI方式举例说明

3.1、带URI方式(例1)

3.2、带URI方式(例2)

3.3、带URI方式(例3)

3.7、带URI方式总结


1、proxy_pass的类型

Nginx的官网将proxy_pass分为两种类型:

(先明白上面的两种类型,很重要!下面的就按照我的方式,就能看懂了,只要你认真看完这篇文章,保证你对于proxy_pass的斜杠问题很通透!)

2、不带URI方式列举说明

我基于上面的两种类型给大家举例,为了方便理解,这里解释一下,咱们只用看proxy_pass中ip+端口后面有没有/,就可以区分是不带URI还是带URI方式了。例如:http://localhost:8080,这样的就是典型的不带URI方式,例如:http://localhost:8080/、http://localhost:8080/aaa、http://localhost:8080/a/b/c,这些统称为带URI方式。

2.1、不带URI方式(例1)

假如客户端请求为:http://localhost/test1/xxx

bash 复制代码
location /test1/ {
  proxy_pass http://localhost:8080;
}

来看第一个举例,proxy_pass中http://localhost:8080没有后面的/,也就是典型的不带URI方式,

要得到代理后的请求路径,记住一句话:不带URI,保留location后的内容,拼接代理路径后详细看下面的步骤拆解

(1)首先保留location后的所有内容

http://localhost/test1/xxx

(2)拼接代理路径后面

最终请求:http://localhost:8080/test1/xxx

2.2、不带URI方式(例2)

如果上面例1还没有明白,我们多来几个例子,保证你能够看懂这个变换过程,来看例2

假如客户端请求为:http://localhost/test2/xxx

bash 复制代码
location /test2 {
  proxy_pass http://localhost:8080;
}

这次是location中没有了右/,还是那句话:不带URI,保留location后的内容,拼接代理路径后。

详细看下面的步骤拆解:

(1)首先保留location后的所有内容

http://localhost/test2/xxx

(2)拼接代理路径后面

最终请求:http://localhost:8080/test2/xxx

2.3、不带URI方式总结

可以看出,不带URI方式是最简单的一个,不管loction中带不带右/,都是保留直接拼接到proxy_pass的后面。

3、带URI方式举例说明

带URI方式比较难懂,不过,只要按照我给的方法,也是非常的轻松,来看下面的举例。

还是一句话:带URI,去除location,剩下右侧内容拼接到代理路径中

3.1、带URI方式(例1)

假如客户端请求:http://localhost/test1/xxx

bash 复制代码
location /test1/ {
  proxy_pass http://localhost:8080/;
}

详细看下面步骤拆解:

(1)首先在客户端请求去除location,获得剩下的右侧内容

http://localhost/test1/xxx ---------------------------> xxx(获得的右侧内容

(2)拼接到代理路径中

最终请求:http://localhost:8080/xxx

3.2、带URI方式(例2)

还是那句话:带URI,去除location,剩下右侧内容拼接到代理路径中

假如客户端请求:http://localhost/test2/xxx

bash 复制代码
 location /test2 {
  proxy_pass http://localhost:8080/;
 }

详细看下面步骤拆解:

(1)首先在客户端请求去除location,获得剩下的右侧内容

http://localhost/test2/xxx --------------------------------> /xxx(获得的右侧内容

(2)拼接到代理路径中

最终请求:http://localhost:8080//xxx http://localhost:8080//xxx(这里就有两个/了)

3.3、带URI方式(例3)

还是那句话:带URI,去除location,剩下右侧内容拼接到代理路径中

假如客户端请求:http://localhost/test3/xxx

bash 复制代码
location /test3/ {
  proxy_pass http://localhost:8080/aaa;
}

详细看下面步骤拆解:

(1)首先在客户端请求去除location,获得剩下的右侧内容

http://localhost/test3/xxx ------------------------> xxx(获得的右侧内容

(2)拼接到代理路径中

最终请求:http://localhost:8080/aaaxxx

http://localhost:8080/aaaxxx(这里aaa和xxx之间没有/,显然这是不对的)

3.4、带URI方式(例4)

还是那句话:带URI,去除location,剩下右侧内容拼接到代理路径中

假如客户端请求:http://localhost/test4/xxx

bash 复制代码
location /test4/ {
  proxy_pass http://localhost:8080/aaa/;
}

详细看下面步骤拆解:

(1)首先在客户端请求去除location,获得剩下的右侧内容

http://localhost/test4/xxx ------------------------> xxx(获得的右侧内容

(2)拼接到代理路径中

最终请求:http://localhost:8080/aaa/xxx

3.5、带URI方式(例5)

还是那句话:带URI,去除location,剩下右侧内容拼接到代理路径中

假如客户端请求:http://localhost/test5/xxx

bash 复制代码
 location /test5 {
  proxy_pass http://localhost:8080/aaa;
 }

详细看下面步骤拆解:

(1)首先在客户端请求去除location,获得剩下的右侧内容

http://localhost/test5/xxx ------------------------> /xxx(获得的右侧内容

(2)拼接到代理路径中

最终请求:http://localhost:8080/aaa/xxx

3.6、带URI方式(例6)

还是那句话:带URI,去除location,剩下右侧内容拼接到代理路径中

假如客户端请求:http://localhost/test6/xxx

bash 复制代码
 location /test6 {
  proxy_pass http://localhost:8080/aaa/;
 }

详细看下面步骤拆解:

(1)首先在客户端请求去除location,获得剩下的右侧内容

http://localhost/test6/xxx ------------------------> /xxx(获得的右侧内容

(2)拼接到代理路径中

最终请求:http://localhost:8080/aaa//xxx

http://localhost:8080/aaa//xxx(这里aaa和xxx之间有两个/,显然这是不对的)

3.7、带URI方式总结

估计有细心的小伙伴会发现一个问题,就是当location和proxy_pass其中有一个不带/(例如例2、例3、例6 ),最终的请求路径就不同寻常了,所以这里给大家一个建议,以后写反向代理时,要不location和proxy_pass 都带/,要不都不带,否则就会出现上面例子里的错误。

好了,本篇文章就到这里啦,制作不易,还请小伙伴们点赞支持呀!

相关推荐
鹧鸪yy2 小时前
认识Node.js及其与 Nginx 前端项目区别
前端·nginx·node.js
__lll_3 小时前
Nginx proxy_pass 404/502 根源:漏写末尾斜杠 / 的修复指南
nginx
Clownseven1 天前
Docker+Nginx+Node.js实战教程:从零搭建高可用的前后端分离项目
nginx·docker·node.js
水冗水孚2 天前
图文并茂讲解nginx中http升级https(部署SSL证书)知识点总结
nginx·http·https
HYI3 天前
小公司前端多分支测试太痛苦?我自己写了个轻量 CLI
nginx·vite
timeweaver3 天前
深度解析 Nginx 前端 location 配置与优先级:你真的用对了吗?
前端·nginx·前端工程化
Moment3 天前
nginx 如何配置防止慢速攻击 🤔🤔🤔
前端·后端·nginx
伊成4 天前
Docker 部署 Nginx 完整指南
nginx·docker·容器
小白的代码日记4 天前
Nginx学习与安装
运维·nginx
ayaya_mana4 天前
Nginx性能优化与安全配置:打造高性能Web服务器
运维·nginx·安全·性能优化