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

前言

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

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

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

概念实例化

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

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

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

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

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

概念

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

正向代理（ Forward Proxy ）：

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

反向代理（ Reverse Proxy ）：

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

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

特点

正向代理

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

反向代理

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

共同点

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

区别

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

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

实际应用

上网软件 —— 正向代理

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

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

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 表示负载服务器池，定义名字为 myupstream 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 天更新一篇。

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

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

如果你想加群交流，你也可以添加我的微信 wqhhsd。

前言