网络 URL 规范、HTTP 协议原理及 Charles 抓包测试

QALab
26 阅读9分钟

  • 网络资源：利用网络可以获取任何信息资源， 例如：浏览器输入某网站域名，就打开某网站首页

  • 资源怎么表示？ 通过URL表示

  • URL：统一资源定位符，表示网络资源的存储位置

  • URL的组成：

    • 协议：网络通信使用一套规则（按照什么规则通信的应用服务）。例如：HTTP、HTTPS

    • 域名或主机：访问的资源服务器的IP或者域名。例如：www.baidu.com

    • 端口：标识特定的应用程序/服务，程序通信的出入口。例如：HTTP默认端口80，HTTPS默认端口443

    • 资源路径（可选）：存放的具体路径。

    • 查询参数（可选）：请求携带的参数。通过 ? 进行分隔，多个参数之间通过&符号连接。

    • 构成：协议://域名或IP:端口号/资源路径?查询参数
    • 必填：协议://域名或IP:端口号 如果是协议默认的端口号，可以不写

网络传输协议（HTTP）

  • 协议：网络中数据传输遵循的规则 , 网络协议：计算机通信的规则, 常见协议：HTTP/HTTPS、SSH、FTP等

  • HTTP：超文本（文字、图片、音频、视频）传输协议，访问网络中资源常使用的一种协议（网络中传输类似于网页类型的文档的协议）。默认端口号：80 ; HTTPS：安全的超文本传输协议。默认端口号：443

  • HTTP访问过程

    • ①HTTP请求：请求行、请求头、请求体
    • ②HTTP响应：响应行、响应头、响应体
ScreenShot_2026-05-06_110232_558.png

HTTP请求说明

  • 请求行：请求数据包的第一行内容
  • 请求头：从第二行到空行之间内容
  • 请求体：空行下方的内容

ScreenShot_2026-05-06_111030_051.png

http请求-请求行

  • 位置：HTTP请求的第一行
  • 作用：描述请求的方法、URL、协议版本信息
  • 请求方法作用：按照什么方式操作资源
  • 常见的HTTP请求方法：
    • GET：从服务器获取资源（查）
    • POST：在服务器新建一个资源（增）
    • PUT：在服务器更新资源（改）
    • DELETE：从服务器删除资源（删）

ScreenShot_2026-05-06_112613_443.png

面试题: http请求方法中,get请求和post请求有啥区别？
  • 是否有请求体：post有请求体，get没有请求体
  • 参数位置：post发送请求携带参数一般在请求体中，get请求参数在URL中
  • 参数大小：get请求携带参数大小受限制，post请求参数大小不受限制
  • 是否安全：get请求不安全（URL中直接能看到），post请求相对安全
  • 方法作用：get查询、post任意
  • 是否缓存：get有缓存，post没有
  • 支持编码：get请求的URL编码是ASCII，post请求的请求体数据编码任意类型

http请求-请求头

  • 位置：HTTP请求的第二行到空行之间
  • 作用：描述请求客户端的属性信息
  • 请求头的Content-Type：表示请求体的数据类型
    • text/html： HTML格式
    • text/plain：纯文本格式
    • image/jpeg：jpg图片格式
    • application/json： JSON数据格式
    • application/x-www-form-urlencoded： 表单默认的提交数据格式
    • multipart/form-data： 在表单中进行文件上传时使用

ScreenShot_2026-05-06_112445_340.png

http请求-请求体

  • 位置：空行下面内容
  • 作用：描述请求携带的数据
  • 请求体：表示传输的数据；在post和put方法中使用，配合请求头Content-Type

ScreenShot_2026-05-06_113756_719.png

案例：F12抓取指定URL的登录接口，获取HTTP请求数据

地址： hmshop-test.itheima.net/

  1. 请求的接口URL：
  2. 请求的方法：
  3. 请求数据类型：
  4. 请求数据：

ScreenShot_2026-05-06_114222_717 (2).png

HTTP响应说明

  • 响应行：响应数据包第一行内容
  • 响应头：从第二行开的到空行之间内容
  • 响应体：空行下方的内容

ScreenShot_2026-05-06_111429_856.png

http响应-响应行

  • 位置：HTTP响应的第一行
  • 作用：描述服务器处理结果
  • 常见响应状态码（三位数字组成）：
    • 2xx：成功 【200】
    • 3xx：重定向 【301、302】
    • 4xx：客户端错误 【401、403、404】
    • 5xx：服务器端错误 【500、503】

ScreenShot_2026-05-06_114658_330.png

http响应-响应头

  • 位置：HTTP响应第二行到空白行
  • 作用：描述服务器属性信息
  • 组成：由键值对组成

ScreenShot_2026-05-06_115035_338.png

http响应-响应体

  • 位置：HTTP响应空白行以下
  • 作用：服务器返回的数据
  • 类型：有图片、json、html、xml等

ScreenShot_2026-05-06_115352_792.png

案例：F12抓取指定URL的登录接口，查看响应数据
  1. 响应状态码：
  2. 响应数据及具体类型：
附：常见HTTP响应状态码

ScreenShot_2026-05-06_132012_935.png

抓包

  • 抓包（packet capture）：使用工具抓取客户端与服务器交互数据包的操作。
  • 数据包：客户端与服务器相互交互的内容。
  • 常见抓包工具：F12，Charles，Fiddler等
  • 为什么抓包？(应用场景)
    • 定位前后端bug
    • 模拟弱网测试
    • 绕过界面（拦截请求修改），模拟测试后台接口
  • 如何区分前后端 bug？
    • ① 如果抓不到请求或请求有误是前端问题；
    • ② 如果有请求且正确但是没响应或者响应错误，那就是后端的问题；
    • ③ 如果抓包有请求也有响应且都正确，但是页面显示还是报错了，则还是前端问题（页面渲染）。
ScreenShot_2026-05-06_132932_489.png

抓包工具Charles和Fiddler区别

  • 支持的操作系统比较多：Windows、macOS、Linux
  • Charles收费（免费试用时间30天）

工具介绍：Charles是一款在Windows/Mac下常用的数据包截取工具，支持Web/APP端网络数据包的抓取分析。

抓包原理：

ScreenShot_2026-05-06_133152_839 (2).png

抓包工具Charles

image-20220320015732637.png

image-20211108165741519.png

1.抓取HTTPS的数据包设置

  1. 网络设置--设置【Firefox为例】

image-20250615225437501.png

  1. Charles设置代理Proxy -- Proxying Settings

image-20250615225204756.png

2.抓包步骤

抓包步骤：
- 打开Charles工具，开启代理设置（Proxy Settings...）
- 打开默认浏览器(浏览器也需要设置代理)，输入待抓包的地址，回车/刷新
- 查看会话列表抓取到的数据包（按照域名找到对应的数据包）
  • 开启代理（Proxy --> Proxy setting--> enable transparent HTTP proxying）

image-20210917094256869.png

  • 抓取对应数据包

    通过工具栏，清除工具，清除会话信息之后再操作浏览器抓取新包

    • 抓取线上tpshop首页数据包并过滤

image-20220320014223870.png

3.应用场景介绍

3.1 定位前后端bug

能够根据抓包工具定位前后端bug

面试：如何定位前后端bug？

  • 案例问题分析

    # tpshop后台新增会员成功后，详情中显示的性别和前端页面显示的性别不一致，该问题是前端还是后端的问题？
-- 不确定提交bug给前端开发还是后端开发
# 通过抓包去定位，怎么抓包？
1.浏览器输入访问服务器地址，回车发送请求，查看抓包工具中是否有数据包
2.确定需要抓取哪个页面的数据包【上述问题的数据源于登录成功的接口响应--> 个人信息】
3.抓取登录成功的数据包【进入登录页面，Charles中清空其他数据包，直接登录成功操作】
4.进入Charles查看当前服务器地址下面的第一个/第二个数据包基本就是登录的数据包
5.进一步查看数据包中请求体数据是否是页面输入的数据，如果是那就是登录的数据包
6.看响应体的数据，从中获取与性别有关的字段值【需要对比数据库看是否和数据库存储的一致】
结论：请求数据正确（请求发送的和页面一致）、响应数据正确（后台响应的和数据库一致）、但是最终前端页面显示还是错误-->前端bug
    • 数据库截图+抓包响应截图

image-20250616115909153.png

image-20240907160018283.png

  • 定位思路

    ①确认请求是否有问题，请求有问题-->前端

    ②确认响应是否有问题，响应有问题-->后端

    如何确定响应的问题？ - 返回的数据和数据库是否一致

    ③请求响应都没有问题，但页面显示错-->前端

案例 1.定位前后端bug：电商前端页面显示会员性别和后台页面不一致

图片高清修复 (1).png

3.2 弱网设置

弱网延时和带宽设置--> 模拟不同网络

image-20230308173904327.png

  • 使用fiddler时可以计算延迟时间（1KB或者1MB）

image-20240907165621302.png

  • Charles设置弱网操作界面

image-20240907170248765.png

  • 具体模拟测试步骤

    • 不开启弱网，用正常网络访问页面，抓取对应数据包查看传输时间【Duration】

    • 设置好弱网参数后，开启弱网，再次访问上述同一页面，抓取对应数据包查看传输时间

    • 对比两次访问的【Duration】时间变化，弱网情况下有延迟，且页面不能出现崩溃。

image-20240907170430501.png

案例 2.模拟弱网测试：模拟带宽比较低的网络测试延迟
  • 需求：模拟3G网络带宽，访问tpshop首页，查看延时多少？是否有异常？
  • 设置：
      1. 设置网络带宽
      1. 操作对应页面/APP应用
      1. Charles查看延迟时间/趋势变化
      1. 确认应用程序是否有异常

ScreenShot_2026-05-06_135722_084.png

3.3 绕过界面做服务端测试

场景：页面部分异常数据，在前端做限制了，无法测试，可以绕过界面做接口验证测试。

  • 项目案例

    例如：
1.注册登录中如果手机号超过11位长度测试，如果超过11位，页面可能无法输入测试，可以绕过界面测试
2.购物车商品数量有上限200的限制，页面无法输入201，可以绕过页面做接口结果测试
    • 拦截请求：测试后台接口【后台逻辑正确】
    • 拦截响应：测试页面显示【变形、报错】

  • 操作步骤

image-20240907172857671.png 最后点击关闭断点按钮

案例 3.异常数据测试：绕过界面直接测试服务器
  • 需求：购物车商品数量有上限200的限制，页面无法输入201，可以绕过页面做服务端测试
  • 设置：
    • 打开浏览器输入待测地址
    • 在Charles的 Proxy->Breakpoints
      • 勾选：Enable Breakpoints
      • 点击：Add 添加设置断点的URL信息
      • 【可设置：protocol、host、request、response】
  • 确认：设置完成后点击 OK
  • 在浏览器模拟用户进行操作测试
  • Charles开始抓取到当前数据包并闪烁提示
  • 在Charles的 Breakpoints 修改请求的数据 → 点击 Execute
  • 在Charles的 Breakpoints 修改响应的数据 → 点击 Execute（注：可跳过修改响应，直接执行）
  • 弹出的断点数据包含一路 Execute 执行完毕 → 最后点击 关闭断点按钮
avatar
文章
阅读
粉丝