【工作记录】F12查看接口信息及postman中使用

可参考

详细教程：如何从前端查看调用接口、传参及返回结果（附带图片案例）_f12查看接口及参数-CSDN博客

1、接口信息

接口基础知识2：http通信的组成_接口请求信息包括-CSDN博客

HTTP类型接口之请求&响应详解 - 三叔测试笔记 - 博客园

1. HTTP请求报文

• 概念：HTTP请求报文是客户端向服务器发送的请求，用于获取资源或提交数据。根据请求方法的不同，请求报文的结构和内容会有所变化。

• 报文结构：

  1. 请求行（Request Line） ：
     ① 格式 ：<方法> <请求目标> <HTTP版本>
     ② 示例 ：GET /index.html HTTP/1.1
     ③ 作用 ：<方法>用于表示请求的类型（如GET, POST等）；<请求目标>通常是请求资源的URL路径；<HTTP版本>如HTTP/1.1，不同版本的HTTP协议具有不同的特性。

  2. 请求头（Request Headers） ：请求头可包含多个字段，字段格式为：<字段名>: <字段值>（eg:Accept: text/html）；请求头的作用是提供客户端信息和请求参数。

  3. 空行（Empty Line） ：其作用是分隔请求头和请求体。

  4. 请求体（Request Body）：可选，通常用于 POST、PUT等请求类型。请求体包含了提交的数据（如提交的表单数据）。

• 首部行常用字段：

  1. Host：目标服务器的主机名。

  2. User-Agent：客户端信息（如浏览器类型）。

  3. Accept：客户端接受的媒体类型（如 text/html）。

  4. Content-Type：请求体的媒体类型（如 application/json）。

  5. Content-Length：请求体的长度。

• GET请求与POST请求的区别：

  1. GET请求 ：请求体为空，数据直接通过URL传递。GET请求的特点有：①数据长度有限（受URL长度限制）；②数据可见（包含在URL中），不安全；③适用于获取资源。

  2. POST请求 ：请求体包含数据，数据通过请求体（载荷）传递。POST请求的特点有：①数据长度理论上无限制；②数据不可见（封装在请求体中），相比GET请求更安全；③适用于提交数据（例如提交表单数据）。

2. HTTP响应报文

• 概念：HTTP响应报文是服务器对客户端请求的响应，返回请求结果。其结构包括状态行、响应头和响应体。

• 报文结构：

  1. 状态行（Status Line） ：

     ① 格式：<HTTP版本> <状态码> <状态短语>

     ② 示例：HTTP/1.1 200 OK

     ③ 作用：<HTTP版本>如HTTP/2，不同版本的HTTP协议具有不同的特性；<状态码>表示请求的结果（如 200、404）；<状态短语>则是对状态码的简要描述（如 OK、Not Found）。

  2. 响应头（Response Headers） ：响应头可包含多个字段，字段格式为：<字段名>: <字段值>（eg: Content-Type: text/html）；请求头的作用是提供客户端信息和请求参数；响应头的作用是提供服务器信息和响应参数。

  3. 空行（Empty Line） ：其作用是分隔响应头和响应体。

  4. 响应体（Response Body）：可选，包含服务器返回的数据，也可能没有返回，比如304。

• 首部行常用字段：

  1. Content-Type：响应体的媒体类型（如 text/html）。

  2. Content-Length：响应体的长度（如 1024字节）。

  3. Set-Cookie：服务器设置的Cookie。

  4. Cache-Control：缓存控制指令。

• 常见状态码

  1. 200 OK：请求成功。

  2. 404 Not Found：请求的资源未找到。

  3. 500 Internal Server Error：服务器内部错误。

2、浏览器F12查看

1. Headers标头

包含请求头和响应头信息，如：

Content-Type：指定请求或响应的内容类型（如application/json）。

Authorization：用于身份验证的令牌或凭据。

Cookie：存储在客户端的会话信息。

User-Agent：标识发送请求的浏览器或客户端。

2. Payload负载

显示请求体的内容，即前端传递给后端的参数。对于不同类型的请求，Payload内容有所不同：

POST/PUT 请求：通常为JSON格式的数据，例如：

3. Preview预览

更友好的格式展示返回数据，便于阅读。对于复杂的嵌套结构，Preview 会自动格式化并提供折叠功能

4. Response响应

显示后端返回的数据，通常为JSON格式。

3、浏览器查看后，使用postman测试接口

1：在浏览器中捕获请求

1. 打开浏览器开发者工具：

• 按 `F12` 或右键页面选择 **检查（Inspect）**。

2. 切换到 **Network（网络）** 选项卡。

3. 触发需要分析的POST请求（如提交表单、点击按钮等）。

4. 在请求列表中：

• 过滤请求类型为 **XHR** 或 **Fetch**（通常POST请求在此分类）。

• 找到目标POST请求，点击查看详细信息。

2：复制关键信息

1. 复制请求URL

• 在请求详情页的 **Headers** 选项卡中，找到 **Request URL**，右键复制完整URL。

2. 复制请求头（Headers）

• 在 **Headers** 选项卡的 **Request Headers** 区域：

• 复制关键头信息，如：

```http

Content-Type: application/json # 或其他类型（如表单）

Authorization: Bearer xxxxxx # 认证信息（如有）

User-Agent: ...

3. 复制负载参数（Payload）

• 切换到 **Payload** 或 **Request** 选项卡（不同浏览器可能名称不同）：

• 查看 **Request Payload** 或 **Form Data**，复制完整的参数（可能是JSON、表单键值对等格式）。

3：在Postman中配置请求

1. 创建新请求**

2. 打开Postman，点击 **+ New** 创建新请求。

3. 设置请求方法为 **POST**。

4. 粘贴复制的 **Request URL** 到地址栏。

5. 添加请求头（Headers）**

6. 切换到 **Headers** 选项卡。

7. 添加复制的请求头（如 `Content-Type`, `Authorization` 等）。

8. 设置请求体（Body）**

9. 切换到 **Body** 选项卡。

10. 根据请求头中的 `Content-Type` 选择对应格式：

• **JSON 数据**：选择 `raw` → 右侧下拉菜单选 **JSON** → 粘贴JSON参数。

```json

{

"username": "test",

"password": "123456"

}

```

• **表单数据**：选择 `x-www-form-urlencoded` → 填写键值对。

```

key: username, value: test

key: password, value: 123456

```

• **FormData/文件上传**：选择 `form-data` → 添加键值或文件。

4：参数格式为form-data

Content-Type: multipart/form-data;

5：参数格式为json

content-type:application/json

6：发送请求并验证

1. 点击 **Send** 发送请求。

2. 检查 **Response** 区域的状态码和返回数据，确认是否与浏览器结果一致。

**常见问题处理**

1. **认证失败**：

• 检查 `Authorization` 头是否有效（如Token是否过期）。

2. **参数格式错误**：

• 确保 `Content-Type` 和请求体格式匹配（如JSON需用双引号）。

3. **跨域问题（CORS）**：

• 在Postman设置中关闭跨域限制（Postman默认绕过CORS）。