目录

背景

proxy_pass

proxy_set_header

参考文档

背景

部署项目,编辑Nginx配置文件时,用到了 proxy_pass和proxy_set_header,由于之前用的比较少,所以顺便去了解一波

proxy_pass

#结尾不加/
location /abc/ {
        proxy_pass http://10.1.12.123:8080;
}
#结尾添加/
location /abc/ {
        proxy_pass http://10.1.12.123:8080/;
}

以上两段代码区别就是proxy_pass指令后边有没有“/”，这部分内容叫做URI。有的话表示绝对根路径；如果没有，则表示相对路径，把我们匹配的路径部分也代理走

如果我们想要要保持输入的请求原样不变传给后端，那么proxy_pass指令就不能带有URI

当请求是 http://10.1.12.123:8080 时,
第一个配置处理之后传给后端应用的请求是 http://10.1.12.123:8080  不变。
第二个配置会把请求 http://10.1.12.123:8080  中与 location 匹配的部分（"/abc/"）替换为proxy_pass结尾的URI（ "/" ），变成 http://10.1.12.123:8080

（2022-7-23 更新）

Vue项目本地配置代理转发

访问时报错，405(not allowed)，查看nginx配置文件

proxy_pass 写的是 http://127.1.2.1:8000/

后面修改为 http://127.1.2.1:8000，去掉 “/”后就能成功访问了，为啥呢？具体来区分一下 末尾有  “/” 和没有的区别

假设我们访问路径为 http://example.com/api/index.html 时

第一种

location /api/ {
proxy_pass http://127.1.2.1:8000/;
}

代理到URL ：http://127.1.2.1/index.html

第二种（相当于第一种，末尾少了我们的绝对根路径 / ）

location /api/ {
proxy_pass http://127.1.2.1:8000;
}

代理到URL：http://127.1.2.1/api/index.html

修改后就能转发代理成功了

proxy_set_header

设定被代理服务器接收到的header信息,重定义发往后端服务器的请求头
语法： 
proxy_set_header field value;
field ：为要更改的项目，也可以理解为变量的名字，比如host
value ：为变量的值
proxy_set_header       Host $http_host; 
$http_host：代理服务器本身IP,不改变请求头的值.
$proxy_host 会重新设置请求头
$host 请求未携带HOST请求头时为虚拟主机的主域名
proxy_set_header       X-Real-IP $remote_addr;
$remote_addr：前一节点的IP，并不一定是用户的真实IP,客户端的ip,若有代理的话表示最后一个代理服务器的ip.
remote_addr表示的IP不可更改.如果可以随意更改的话,就无法建立正常的TCP连接.
proxy_set_header       X-Forwarded-For $proxy_add_x_forwarded_for；
设置被代理端接收到的远程客户端IP，如果不设置，则header信息中并不会透传远程真实客户端的IP地址。
X-Forwarded-For :XFF头,代表客户端,就是HTTP请求段的真实IP,只有通过了HTTP代理或负载均衡服务器时才会添加该项.
标准格式如下：
X-Forwarded-For: client1, proxy1, proxy2
从标准格式可以看出，X-Forwarded-For头信息可以有多个，中间用逗号分隔，第一项为真实的客户端ip，剩下的就是曾经经过的代理或负载均衡的ip地址，经过几个就会出现几个。
此变量只是记录请求的服务器路由顺序,因为这个变量不管在客户端还是代理服务商都可以伪造.
  
proxy_set_header        X-Forwarded-Proto  $scheme;
proxy_set_header        X-Forwarded-Uri  $request_uri;
不设置proxy_set_header，则默认host的值为proxy_pass后面跟的那个域名或者IP（一般写IP）
proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for; 
$proxy_add_x_forwarded_for变量包含客户端请求头中的"X-Forwarded-For"，与$remote_addr用逗号分开，如果没有"X-Forwarded-For" 请求头，则$proxy_add_x_forwarded_for等于$remote_addr。

参考文档

https://blog.csdn.net/u011774517/article/details/122862207

http://nginx.org/​​​​​​
https://www.cnblogs.com/caoweixiong/p/12213993.html

若有不当之处,恳请不吝赐教~

Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign