《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理

Posted 2023-04-26 北京-宏哥

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理相关的知识，希望对你有一定的参考价值。

1.简介

在App开发的过程当中，抓包是一个很常见的需求，而有些app的请求不会在网络设置代理时被抓到数据包，这里若是需要抓包就需要搭建反向代理。

2.什么是代理？

什么是代理，来一张图了解一下。

代理又分为正向代理和反向代理。

3.什么是正向代理？

先来看张图~

【再举个栗子】

某同学喜欢面向搜索引擎编程，想通过百度搜索引擎查找一些学习资料，但是有些网站直接访问可能不太安全，会暴露自己的IP，同学比较苦恼，想着怎样才能使用百度搜索自己想要的学习资料，又不会暴露自己的IP在网站上呢？

这时我告诉该同学，我呢手上刚好有一台代理服务器，这台代理服务器通过nginx配置了正向代理转发http和https请求，你呢，只需要在自己的Windows本地电脑的网关配置一下这台代理服务器的IP和端口号，就能正常通过代理服务器访问到百度并搜索相关的学习资料了，还不会暴露自己真实的IP~

4.什么是反向代理？

先来一张图了解下~

和正向代理相应的，正向代理代理客户端，反向代理代理服务端。

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

我们在租房子的过程中，除了有些房源需要通过中介以外，还有一些是可以直接通过房东来租的。用户直接找到房东租房的这种情况就是我们不使用代理直接访问国内的网站的情况。

还有一种情况，就是我们以为我们接触的是房东，其实有时候也有可能并非房主本人，有可能是他的亲戚、朋友，甚至是二房东。但是我们并不知道和我们沟通的并不是真正的房东。这种帮助真正的房主租房的二房东其实就是反向代理服务器。这个过程就是反向代理。

对于常用的场景，就是我们在Web开发中用到的负载均衡服务器（二房东），客户端（租客）发送请求到负载均衡服务器（二房东）上，负载均衡服务器（二房东）再把请求转发给一台真正的服务器（房东）来执行，再把执行结果返回给客户端（租客）。
反向代理，其实是"代理服务器"代理了"目标服务器"，去和"客户端"进行交互。

通过反向代理服务器访问目标服务器时，客户端是不知道真正的目标服务器是谁的，甚至不知道自己访问的是一个代理。

5.正向代理和反向代理的区别

虽然正向代理服务器和反向代理服务器所处的位置都是客户端和真实服务器之间，所做的事情也都是把客户端的请求转发给服务器，再把服务器的响应转发给客户端，但是二者之间还是有一定的差异的。

1、正向代理其实是客户端的代理，帮助客户端访问其无法访问的服务器资源。反向代理则是服务器的代理，帮助服务器做负载均衡，安全防护等。

2、正向代理一般是客户端假设的，比如在自己的机器上安装一个代理软件。而反向代理一般是服务器假设的，比如在自己的机器集群中部署一个反向代理服务器。

3、正向代理中，服务器不知道真正的客户端到底是谁，以为访问自己的就是真实的客户端。而在反向代理中，客户端不知道真正的服务器是谁，以为自己访问的就是真实的服务器。

4、正向代理和反向代理的作用和目的不同。正向代理主要是用来解决访问限制问题。而反向代理则是提供负载均衡、安全防护等作用。二者均能提高访问速度。

6.须要准备的工做

在本身电脑上面搭建一个可用的Charles
须要抓包的远端服务的端口号和Host地址
在本身电脑上面搭建一个本地DNS解析服务

7.具体步骤 (Windows下的操作，Mac也同理)

1.确保手机可以连接上Charles，本身电脑上面可以看到正常请求出来的数据包（具体抓包可以看宏哥前边的教程）

2.打开Charles，勾选Proxy --> Reverse proxise...,进入反向代理设置界面。如下图所示：

3.进入Reverse Proxies Settings（反向代理设置）页面，勾选 Enable Reverse Proxies 。如下图所示：

4.在【Add】新增。如下图所示：

Edit Reverse Proxy 视图中的选项含义：

local port：本地端口
本地主机上的端口创建反向代理。该字段可能会自动填充一个可用的端口。如果有另一个应用程序使用该端口，则在反向代理启动时将收到一条警告消息

Remote host：远程主机
作为反向代理的目的地的远程主机的主机名或IP地址

Remote port：远程端口
远程端口默认为80，这是HTTP的默认端口。

Rewrite redirects：重写重定向
重定向远程服务器的响应将被重写与反向代理源地址相匹配，默认为开
远程服务器的重定向响应是完全限定的URL，即使它们在同一网站内
如果重定向到远程服务器地址，则需要将其重写为反向代理本地地址，否则客户端将使用重定向URL到远程主机，因此不再通过反向代理连接

Preserve host in header fields：保留主机头
Host HTTP标头从传入请求不变地传递，而不是正常重写主机头以匹配反向代理远程主机，默认为关闭
仅当您具有特定要求时，才需要保留主机头;普通使用的时候没有必要使用的

Listen on a specific address：监听特定地址
指定本地地址以侦听反向代理，可以启用此选项并在此处输入IP地址

8.Charles反向代理实战

Charles反向代理是提供一个端口转发的功能，用于除IE外发出的HTTP请求，例如需要跟踪Smartbi服务器与XMLA服务器之间的通信、Smartbi SDK与服务器之间通信等。

宏哥在Apache服务器安装在A计算机上，IP地址为：10.11.53.180，并开启服务，端口号为：80（默认）。然后宏哥简单部署一个HTML页面，在浏览器中访问服务。如下图所示：

现移动端访问A服务器部署的HTML页面出现错误，但是需要录制移动端的HTTP请求。这时候就需要Charles的反向代理帮助我们解决这个问题。具体操作步骤如下：

1.找一台其他计算机，如计算机B，其IP地址为10.11.53.193，宏哥这里演示的就是宏哥的本地计算机，如下图所示：

2.在计算机B上安装Charles，并启动，这里宏哥已经安装就不做演示了。

3.选中charles上的"Proxy"-》"Reverse Proxies"，进入反向代理设置界面，如下图所示：

4.反向代理设置界面如下，点击"Add"按钮，新建反向代理设置，如下图所示：

5.设置反向代理的端口号，IP地址等信息。

其中 Local Port是指计算机B的一个空闲端口，如本例中使用8080；
Remote Host是指HTML页面服务的IP，即计算机A的IP： 10.11.55.182；
Remote Port是指HTML页面服务的端口号，在本例中访问HTML页面的端口号为80（Apache默认端口）
点击OK保存反向代理设置，如下图所示：

6.上一步点击OK之后会出现反向代理列表窗口，勾选我们上一步设置的反向代理，点击ok启用，如下图所示：

7.在任意一台计算机或者移动端上，通过http://计算机B的IP:反向代理中设置的Loal Port端口/inde.html，可以访问到HTML页面服务。本例中通过在浏览器或者移动端的服务器设置上输入http://10.11.53.193:8080/index.html访问,如下图所示：

注：访问是需要写IP，不能写localhost。

8.在charles中会监测到反向代理访问，首次会弹出是否允许访问，选择\'Allow\'按钮，允许访问。没有设置代理之前是访问不到的，如下图所示：

9.在计算机B上的charles就可以录制到HTTP请求，如下图所示：

9.小结

反向代理位于用户和应用服务器之间，是连接用户和服务器的中介。

于是我们可以

1.缓存，将服务器的响应缓存在自己的内存中，减少服务器的压力。

2.负载均衡，将用户请求分配给多个服务器。

3.访问控制

4.加上一些特殊的东西做特殊的事情（如IPS—入侵防御系统、web应用防火墙等）

好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(13)-Charles如何进行Mock和接口测试

1.简介

Charles最大的优势在于抓包分析，而且我们大部分使用的功能也在抓包的功能上，但是不要忘记了，Charles也可以做接口测试。至于Mock，其实在修改请求和响应数据哪里就已经介绍了，宏哥就是在这里简单的提一下介绍一下它的理论知识，今天主要介绍和分享的是使用Charles进行接口测试实操。

2.什么是Mock？

百度百科是这么说的：Mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。

Mock 就是在测试过程中，对于一些不容易构造/获取的对象，创建一个 Mock对象来模拟对象的行为。

Mock 方法是单元测试中常见的一种技术，它的主要作用是模拟一些在应用中不容易构造或者比较复杂的对象，从而把测试与测试边界以外的对象隔离开。

3.Mock测试的优点

3.1团队并行工作

开发过程中，只要交互双方定义好接口，团队之间可以并行工作，进程互不影响，不需互相等待对方进度，只需约定好相互之间的数据规范（接口文档），即可使用 mock 构建出可用接口，然后尽快进行开发和自测，提前发现缺陷.

3.2测试驱动开发 TDD (Test-Driven Development)

单元测试是 TDD 实现的基石，而 TDD 经常会碰到协同模块尚未开发完成的情况，但有了 mock，测试人员可提前接入测试，提供测试效率，当接口定义好后，测试人员就可以创建一个 Mock，把接口添加到自动化测试环境，提前创建测试。

3.3测试覆盖率

接口涉及入参，或者业务逻辑复杂的情况，某些场景无法通过正常手段进行操作，而通过mock虚拟模拟，可以有效的增加覆盖率

3.4隔离系统

若一个接口在不同的状态下要返回不同的值，常见做法是复现这种状态然后再去请求接口，但使用某些接口时，可能因操作时机或方式不当导致失败，甚至污染后端存储如数据库等, 为避免系统数据库被污染，可以将接口调整为 Mock 模式，以保证数据库纯净。

4.Mock测试的缺点

Mock也不是万能的，使用Mock也存在着风险，需要根据项目实际情况和具体需要来确定是否选用Mock。

测试过程中如果大量使用Mock，mock测试的场景失去了真实性，可能会导致在后续的系统性测试时才发现bug，使得缺陷发现的较晚，可能会造成后续修复成本更大

5.Mock客户端

接口文档已对接完成，但后端接口还未开发完成，测试人员需要进行单元测试，或提前进行接口自动化测试，需要使用Mock各种请求返回的内容。

6.Mock服务端

遇到前端人员已完成开发任务，而后端人员开发打接口尚未完成这种情况，需要和前端人员联调进行测试，则需要搭建Mock服务。

好了，Mock的理论就介绍到这里，有兴趣的自己可以私下查资料。接下来就要进入今天的重点：使用Charles进行接口测试。

7.Compose

用Charles进行测试，我们使用的主要是Composer功能。这个和Fiddler工具类似。Composer允许自定义请求发送到服务器，可以手动创建一个新的请求。具体操作步骤如下：

7.1方法一

1.打开Charles，点击【Tools】-->【Compose】或者【Compose New...】。如下图所示：

2.填写你要测试接口的信息，有接口文档，按接口文档填写，没有就自己抓包填写，如下图所示：

7.2方法二

1.选中抓到的接口请求信息，右键-->【Compose】，如下图所示：

2.出现了接口请求的相关信息。如下图所示：

8.界面功能解析

根据下图图标注位置对Composer的界面功能进行说明。

1.请求方式：点开可以勾选请求协议是get、post等

2.url地址栏：输入请求的url地址

3.Execute按钮点击后就可以执行请求了

4.执行完成后会在右侧History区域生成历史记录

5.http版本：可以勾选http版本

6.添加请求参数

9.接口测试实战

9.1POST API实战

现在免费的接口很不好找，找了半天找到python里有一个，之前在Fiddler中也用的这个。就用这个举例吧。

接口信息：

接口信息	描述
https://httpbin.org/post	接口地址
请求方式	HTTP POST
请求参数	请求参数格式为 JSON

参数格式：

    "form": 
        "comments": "北京宏哥post接口测试", 
        "custemail": "19182XX@qq.com", 
        "custname": "北京宏哥", 
        "custtel": "13045032408", 
        "delivery": "15:45"

那么如何使用Charles调试一个POST请求并带有json格式的数据，具体操作步骤如下：

1.启动Charles，打开Compose面板, 在Compose新建面板中的输入URL（输入请求接口的地址），下拉框中选择POST请求方式,如下图所示：