【工作记录】F12查看接口信息及postman中使用
可参考
详细教程：如何从前端查看调用接口、传参及返回结果（附带图片案例）_f12查看接口及参数-CSDN博客
1、接口信息
接口基础知识2：http通信的组成_接口请求信息包括-CSDN博客
HTTP类型接口之请求&响应详解 - 三叔测试笔记 - 博客园
1. HTTP请求报文
-
概念：HTTP请求报文是客户端向服务器发送的请求，用于获取资源或提交数据。根据请求方法的不同，请求报文的结构和内容会有所变化。
-
报文结构：
-
请求行（Request Line）：
① 格式：<方法> <请求目标>
② 示例：GET /index.html HTTP/1.1
③ 作用：<方法>用于表示请求的类型（如GET, POST等）；<请求目标>通常是请求资源的URL路径；如 HTTP/1.1，不同版本的HTTP协议具有不同的特性。 -
请求头（Request Headers）：请求头可包含多个字段，字段格式为：
<字段名>: <字段值>（eg:Accept: text/html）；请求头的作用是提供客户端信息和请求参数。 -
空行（Empty Line）：其作用是分隔请求头和请求体。
-
请求体（Request Body）：可选，通常用于 POST、PUT等请求类型。请求体包含了提交的数据（如提交的表单数据）。
-
-
首部行常用字段：
-
Host：目标服务器的主机名。
-
User-Agent：客户端信息（如浏览器类型）。
-
Accept：客户端接受的媒体类型（如 text/html）。
-
Content-Type：请求体的媒体类型（如 application/json）。
-
Content-Length：请求体的长度。
-
-
GET请求与POST请求的区别：
-
GET请求：请求体为空，数据直接通过URL传递。GET请求的特点有：①数据长度有限（受URL长度限制）；②数据可见（包含在URL中），不安全；③适用于获取资源。
-
POST请求：请求体包含数据，数据通过请求体（载荷）传递。POST请求的特点有：①数据长度理论上无限制；②数据不可见（封装在请求体中），相比GET请求更安全；③适用于提交数据（例如提交表单数据）。
-
2. HTTP响应报文
-
概念：HTTP响应报文是服务器对客户端请求的响应，返回请求结果。其结构包括状态行、响应头和响应体。
-
报文结构：
-
状态行（Status Line）：
① 格式：<状态码> <状态短语>
② 示例：HTTP/1.1 200 OK
③ 作用：如 HTTP/2，不同版本的HTTP协议具有不同的特性；<状态码>表示请求的结果（如 200、404）；<状态短语>则是对状态码的简要描述（如 OK、Not Found）。 -
响应头（Response Headers）：响应头可包含多个字段，字段格式为：
<字段名>: <字段值>（eg: Content-Type: text/html）；请求头的作用是提供客户端信息和请求参数；响应头的作用是提供服务器信息和响应参数。 -
空行（Empty Line）：其作用是分隔响应头和响应体。
-
响应体（Response Body）：可选，包含服务器返回的数据，也可能没有返回，比如304。
-
-
首部行常用字段：
-
Content-Type：响应体的媒体类型（如 text/html）。
-
Content-Length：响应体的长度（如 1024字节）。
-
Set-Cookie：服务器设置的Cookie。
-
Cache-Control：缓存控制指令。
-
-
常见状态码
-
200 OK：请求成功。
-
404 Not Found：请求的资源未找到。
-
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）。
