资讯专栏INFORMATION COLUMN

【前端词典】代理的概念及其应用

Steven / 2452人阅读

摘要:于是带着以下两个问题开始学习正向代理以及反向代理。客户端才能使用正向代理。传送门前端词典代理的概念及其应用前端词典滚动穿透问题的解决方案

前言

在平时的工作中,总是会遇到代理的概念。之前我只知道有代理这个概念,不过对其没有一个清晰的理解。于是带着以下两个问题开始学习正向代理以及反向代理。

什么是正向代理,什么是反向代理

正向代理可以做什么,反向代理可以做什么

概念

首先附上一张说明图,先有一个整体的理解。

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

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

特点 正向代理

代理客户;

隐藏真实的客户,为客户端收发请求,使真实客户端对服务器不可见;

一个局域网内的所有用户可能被一台服务器做了正向代理,由该台服务器负责 HTTP 请求;

意味着同服务器做通信的是正向代理服务器;

反向代理

代理服务器;

隐藏了真实的服务器,为服务器收发请求,使真实服务器对客户端不可见;

负载均衡服务器,将用户的请求分发到空闲的服务器上;

意味着用户和负载均衡服务器直接通信,即用户解析服务器域名时得到的是负载均衡服务器的 IP ;

共同点

都是做为服务器和客户端的中间层

都可以加强内网的安全性,阻止 web 攻击

都可以做缓存机制

实际应用 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 中就可以使用 proxyTable 这个属性进行相关的配置来解决跨域问题带来的烦恼。配置如下:

...
proxyTable: {
    "/weixin": {
        target: "http://192.168.48.11:8100/", // 接口的域名 
        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 参数来控制。

以上。

前端词典系列

本文是《前端词典》系列的第一篇文章,这个系列会持续更新,每一期我都会讲一个出现频率较高的知识点。希望大家在阅读的过程当中可以斧正文中出现不严谨或是错误的地方,本人将不胜感激;若通过本系列而有所得,本人亦将不胜欣喜。

内容: 前端以及网络相关知识点的介绍并加以实际应用作为辅助。

目的: 这个系列的文章可以对读者起到一点帮助,解开一些迷惑。

希望各位多指点一二,不吝赐教。

传送门

【前端词典】代理的概念及其应用

【前端词典】滚动穿透问题的解决方案

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/40291.html

相关文章

  • 前端词典代理概念及其应用

    摘要:于是带着以下两个问题开始学习正向代理以及反向代理。客户端才能使用正向代理。传送门前端词典代理的概念及其应用前端词典滚动穿透问题的解决方案 前言 在平时的工作中,总是会遇到代理的概念。之前我只知道有代理这个概念,不过对其没有一个清晰的理解。于是带着以下两个问题开始学习正向代理以及反向代理。 什么是正向代理,什么是反向代理 正向代理可以做什么,反向代理可以做什么 概念 首先附上一张说明...

    netmou 评论0 收藏0
  • 前端词典】滚动穿透问题解决方案

    摘要:接下就说下我对滚动穿透问题解决方案探索的过程,希望对大家有点启发。心想来了突然意识到写弹窗的时候忘记处理滚动穿透的问题了。下期预告前端词典继承必懂知识点传送门前端词典代理的概念及其应用前端词典滚动穿透问题的解决方案 背景 产品有三宝,弹窗,浮层加引导; 设计有三宝,透明,阴影加圆角; 运营有三宝,短信,推送加红包; 程序员有一宝,这个做不了。 随着移动端市场的份额越大,需求就越多...

    _Dreams 评论0 收藏0
  • 前端词典】滚动穿透问题解决方案

    摘要:接下就说下我对滚动穿透问题解决方案探索的过程,希望对大家有点启发。心想来了突然意识到写弹窗的时候忘记处理滚动穿透的问题了。下期预告前端词典继承必懂知识点传送门前端词典代理的概念及其应用前端词典滚动穿透问题的解决方案 背景 产品有三宝,弹窗,浮层加引导; 设计有三宝,透明,阴影加圆角; 运营有三宝,短信,推送加红包; 程序员有一宝,这个做不了。 随着移动端市场的份额越大,需求就越多...

    mzlogin 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    Terry_Tai 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0

发表评论

0条评论

Steven

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<