【前端词典】如何向老板解释反向代理

28,467

前言

现在看到的这篇文章是修改后的第三个版本。

由于我家老板看过之后,对这篇文章的评价是:写的不错,语句是通顺的,排版是可以的,但反向代理是什么还是不清楚?所以我就想尝试着向非 IT 工作者解释“正向代理”和“反向代理”。

接下来我会先尝试面向大众,来解释“代理”的概念。在从专业的角度解释“正向代理”和“反向代理”。

概念实例化

在讲代理的概念之前我先讲个类比。也是我向我家老板解释的过程。

还好我反应机敏,要不然这个月的零花钱就要替我挡一刀了。可是我该怎么解释呢?还要让没有编程语言基础的人也听懂,伤脑筋啊!

在没有思绪的时候,她突然问我晚上吃了没有?这不就是很好的例子吗?

解释了这么久,不知道是真的懂了,还是因为太困了。不过我有钱吃肉了。

接下来我们就认真的看看“正向代理”和“反向代理”

概念

首先看看说明图,先有一个整体的理解。

正向代理( Forward Proxy ):

是指是一个位于客户端和原始服务器之间的服务器,为了从原始服务器取得内容, 客户端向代理发送一个请求并指定目标(原始服务器),然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端才能使用正向代理。

反向代理( Reverse Proxy ):

是指以代理服务器来接受 Internet 上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给 Internet 上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。

接下来我提炼一下各自的特点。

特点

正向代理

  1. 代理客户;
  2. 隐藏真实的客户,为客户端收发请求,使真实客户端对服务器不可见;
  3. 一个局域网内的所有用户可能被一台服务器做了正向代理,由该台服务器负责 HTTP 请求;
  4. 意味着同服务器做通信的是正向代理服务器;

反向代理

  1. 代理服务器;
  2. 隐藏了真实的服务器,为服务器收发请求,使真实服务器对客户端不可见;
  3. 负载均衡服务器,将用户的请求分发到空闲的服务器上;
  4. 意味着用户和负载均衡服务器直接通信,即用户解析服务器域名时得到的是负载均衡服务器的 IP ;

共同点

  1. 都是做为服务器和客户端的中间层
  2. 都可以加强内网的安全性,阻止 web 攻击
  3. 都可以做缓存机制,提高访问速度

区别

  1. 正向代理其实是客户端的代理,反向代理则是服务器的代理。
  2. 正向代理中,服务器并不知道真正的客户端到底是谁;而在反向代理中,客户端也不知道真正的服务器是谁。
  3. 作用不同。正向代理主要是用来解决访问限制问题;而反向代理则是提供负载均衡、安全防护等作用。

说了这么多,现在说说代理在工作中的时机应用场景吧。

实际应用

翻墙软件 —— 正向代理

我们知道在国内用访问 www.google.com 是无法访问的,因为正常情况下是会被 GFW 限制访问的。

可是你还是想使用 google 来科学上网的话,这个时候我们就需要一些代理(翻墙软件)来帮我们去请求 www.google.com,代理再把响应结果返回给你。

GFW 的作用主要是用于分析和过滤中国境内外网络间的互相访问。也就是说,他不仅能限制国内网民访问境外的某些站点,也能限制国外用户访问国内的站点。 我们通常说的“被墙”,就是指访问被 GFW 所限制。而”翻墙“,顾名思义,则是突破 GFW 的限制。

Nginx 服务器 —— 反向代理

Nginx 服务器的功能有很多,诸如反向代理、负载均衡、静态资源服务器等。

客户端本来可以直接通过 HTTP 协议访问服务器,不过我们可以在中间加上一个 Nginx 服务器,客户端请求 Nginx 服务器,Nginx 服务器请求应用服务器,然后将结果返回给客户端,此时 Nginx 服务器就是反向代理服务器。

在虚拟主机的配置中配置反向代理

# 虚拟主机的配置
server {
    listen 8080;                         # 监听的端口
    server_name  192.168.1.1;            # 配置访问域名
    root  /data/toor;                    # 站点根目录
    error_page 502 404 /page/404.html;   # 错误页面
    location ^~ /api/  {                        # 使用 /api/ 代理 proxy_pass 的值
        proxy_pass http://192.168.20.1:8080;    # 被代理的应用服务器 HTTP 地址
    }
}

以上简单的配置就可以实现反向代理的功能。

当然反向代理也可以处理跨域问题。

对于使用 vue-cli 搭建的工程而言,我们知道 vue-cli 采用 http-proxy-middleware 插件来进行代理服务器等各项配置。

所以我们可以利用 proxyTable,设置地址映射表。即使用 proxyTable 这个属性进行相关的配置来解决跨域问题带来的烦恼。配置如下:

...
proxyTable: {
    '/weixin': {
        target: 'http://192.168.20.1:8080/', // 接口的域名
        secure: false,      // 如果是 https 接口,需要配置这个参数
        changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
        pathRewrite: {
            '^/weixin': ''
        }
    },
},
...

负载均衡的配置

# upstream 表示负载服务器池,定义名字为 my
upstream my {
    server 192.168.2.1:8080 weight=1 max_fails=2 fail_timeout=30s;
    server 192.168.2.2:8080 weight=1 max_fails=2 fail_timeout=30s;
    server 192.168.2.3:8080 weight=1 max_fails=2 fail_timeout=30s;
    server 192.168.2.4:8080 weight=1 max_fails=2 fail_timeout=30s;
   # 即在 30s 内尝试 2 次失败即认为主机不可用
  }

负载均衡即将 请求/数据 轮询分摊到多个服务器上执行,负载均衡的关键在于 均匀

也可以通过 ip-hash 的方式,根据客户端 ip 地址的 hash 值将请求分配给固定的某一个服务器处理。

另外,服务器的硬件配置可能不同,配置好的服务器可以处理更多的请求,这时可以通过 weight 参数来控制。

Vue 相关文章输出计划

最近总有朋友问我 Vue 相关的问题,因此接下来我会输出 9 篇 Vue 相关的文章,希望对大家有一定的帮助。我会保持在 7 到 10 天更新一篇。

  1. 【前端词典】Vuex 注入 Vue 生命周期的过程
  2. 【前端词典】浅析 Vue 响应式原理
  3. 【前端词典】新老 VNode 进行 patch 的过程
  4. 【前端词典】如何开发功能组件并上传 npm
  5. 【前端词典】从这几个方面优化你的 Vue 项目
  6. 【前端词典】从 Vue-Router 设计讲前端路由发展
  7. 【前端词典】在项目中如何正确的使用 Webpack
  8. 【前端词典】Vue 服务端渲染
  9. 【前端词典】Axios 与 Fetch 该如何选择

建议你关注我的公众号,第一时间就可以接收最新的文章。

如果你想加群交流,也可以添加有点智能的机器人,自动拉你进群:

热门文章传送门

  1. 【前端词典】滚动穿透问题的解决方案
  2. 【前端词典】5 种滚动吸顶实现方式的比较(性能升级版)
  3. 【前端词典】提高幸福感的 9 个 CSS 技巧
  4. 【前端词典】分享 8 个有趣且实用的 API
  5. 【前端词典】从输入 URL 到展现涉及哪些缓存环节(非常详细)