当前位置：首页 > article >正文

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

article 2026/2/21 18:51:25

可参考

详细教程：如何从前端查看调用接口、传参及返回结果（附带图片案例）_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. 创建新请求**
1. 打开Postman，点击 **+ New** 创建新请求。
2. 设置请求方法为 **POST**。
3. 粘贴复制的 **Request URL** 到地址栏。

2. 添加请求头（Headers）**
1. 切换到 **Headers** 选项卡。
2. 添加复制的请求头（如 `Content-Type`, `Authorization` 等）。

3. 设置请求体（Body）**
1. 切换到 **Body** 选项卡。
2. 根据请求头中的 `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）。