可參考

詳細教程：如何從前端查看調用接口、傳參及返回結果（附帶圖片案例）_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）。