前言

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

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

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

概念实例化

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

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

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

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

概念

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

正向代理（ Forward Proxy ）：

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

反向代理（ Reverse Proxy ）：

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

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

特点

正向代理

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

反向代理

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

共同点

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

区别

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

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

实际应用

FQ软件 —— 正向代理

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

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

GFW 的作用主要是用于分析和过滤中国境内外网络间的互相访问。也就是说，他不仅能限制国内网民访问境外的某些站点，也能限制国外用户访问国内的站点。 我们通常说的“被墙”，就是指访问被 GFW 所限制。而”FQ“，顾名思义，则是突破 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 到展现涉及哪些缓存环节(非常详细)