HTTP request/response cơ bản | Đọc Network tab trước khi học status code
HTTP là một cặp request → response, không phải chỉ mã số trên cột Status. Junior và freelancer nên đọc method + URL + header + body trước khi mở cheat sheet 4xx/5xx. Status trả lời “nhóm lỗi nào”; exchange đầy đủ trả lời “sửa chỗ nào”. Khi đã nắm request/response, dùng HTTP status code cheat sheet để phân nhánh nhanh.
Ticket kiểu “API lỗi rồi” thường kèm screenshot một chữ đỏ hoặc chỉ số 500. Người mới mở ngay danh sách status code — trong khi DevTools đã hiện sẵn URL sai môi trường, thiếu Authorization, hoặc JSON body thiếu field. Bài này dạy đọc request/response — tầng nền trước cheat sheet mã trạng thái.
Ai nên bookmark
- Sinh viên lần đầu gọi
fetch/ Axios - Freelancer hỗ trợ khách SME: “Postman được, web không”
- Frontend nhận API từ team outsourcing khác timezone — cần mô tả lỗi rõ trong chat
Sau bài này bạn biết: cấu trúc một exchange, cách đọc Network tab, checklist 5 phút, và khi nào mới cần bảng status code.
HTTP một câu, rồi bung chi tiết
Client (trình duyệt, app mobile, Postman) gửi request. Server (API, CDN, gateway) trả response. Mỗi lần bạn bấm “Đăng nhập” hoặc load danh sách user, thường có ít nhất một cặp như vậy (đôi khi kèm redirect, preflight CORS — vẫn là HTTP).
Không cần thuộc RFC ngay. Cần thuộc bản đồ:
REQUEST RESPONSE
───────── ──────────
Method + URL Status line (vd. 200 OK)
Request headers Response headers
Body (nếu có) Body (JSON / HTML / rỗng)Status code nằm ở dòng đầu response. Nó quan trọng — nhưng chỉ sau khi bạn biết request đã gửi gì.
Giải phẫu request
1. Method
| Method | Ý định phổ biến | Body? |
|---|---|---|
| GET | Đọc / liệt kê | Thường không |
| POST | Tạo / submit | Thường có |
| PUT/PATCH | Cập nhật | Thường có |
| DELETE | Xóa | Tùy API |
Freelance hay gặp: docs viết POST /api/orders nhưng code gọi GET → 404 hoặc 405. Đó là lỗi method + URL, không phải “server hỏng”.
2. URL = scheme + host + path + query
Ví dụ:
https://api.khach.vn/v1/users?page=2&limit=20
https= schemeapi.khach.vn= host/v1/users= pathpage=2&limit=20= query
Nhầm staging/prod (api-staging vs api) là nguyên nhân 401/404 kinh điển hơn “bug React”.
3. Headers
Header là metadata dạng Tên: giá trị. Hay nhìn khi debug:
| Header (request) | Ý nghĩa nhanh |
|---|---|
Authorization | Bearer token / API key — thiếu → thường 401 |
Content-Type | application/json vs x-www-form-urlencoded |
Accept | Client muốn nhận JSON / HTML… |
Cookie | Session trình duyệt |
Origin | Origin trang gọi API (CORS) |
4. Body
JSON điển hình:
{ "email": "[email protected]", "password": "***" }Checklist body trước khi hỏi backend:
- JSON parse được không (thiếu dấu phẩy, nháy lệch)?
- Field bắt buộc có đủ theo docs không?
- Có gửi nhầm
FormDatakhi API chỉ nhận JSON không?
Giải phẫu response
Status line
Ví dụ: HTTP/1.1 201 Created hoặc trong DevTools chỉ thấy cột 201.
Nhóm thô (đủ cho bước nền):
| Nhóm | Ý | Việc tiếp theo |
|---|---|---|
| 2xx | Thành công | Vẫn đọc body — 200 có thể mảng rỗng |
| 3xx | Redirect | Xem Location, bật Preserve log |
| 4xx | Client/request | Sửa URL, method, auth, body |
| 5xx | Server/upstream | Thu thập log, không “sửa UI cho xong” |
Chi tiết từng mã (401 vs 403, 502 vs 503…) nằm ở cheat sheet status code — đọc sau khi đã copy được exchange.
Response headers hữu ích
Content-Type: application/json— body nên parse JSONWWW-Authenticate— gợi ý cơ chế authRetry-After— với 429/503Set-Cookie— login vừa set session
Response body
Nhiều API trả:
{
"error": "VALIDATION_ERROR",
"message": "email is required",
"requestId": "req_9f3a"
}Freelance nên gửi khách/backend: method, URL, status, requestId, message (che mật khẩu/PII). Chỉ gửi “bị 400” làm mất nửa buổi.
Đọc Network tab như checklist
- Filter
Fetch/XHRđể ẩn CSS/font. - Chọn đúng hàng — timestamp khớp lúc bấm nút.
- Tab Headers → General: Request URL, Method, Status Code.
- Request Headers + Payload: đối chiếu docs.
- Response: copy body lỗi.
- Nếu thấy redirect chuỗi: bật Preserve log, xem request đầu và cuối.
| Triệu chứng | Nhìn request | Nhìn response |
|---|---|---|
| Postman OK, web fail | Origin, Cookie, CORS preflight OPTIONS | Header Access-Control-* hoặc lỗi CORS trên console |
| 401 hàng loạt | Authorization có gửi? token hết hạn? | Body auth error; WWW-Authenticate |
| UI trống nhưng không đỏ | URL/query đúng resource? | 200 với [] hoặc null — không phải status lỗi |
| Sau deploy khách báo lỗi | Host đúng env? version /v1? | 502/503 + body gateway; thu thập thời điểm |
Case study 1 — Freelance: “API chết” hóa ra sai method
Khách gửi ảnh: status 404. Support mới hỏi “server down?”. Mở Network: GET https://api.khach.vn/orders. Docs: POST /orders với body { "sku": "..." }.
Sửa method + body → 201. Không cần tra sâu bảng status: request không khớp contract.
Bài học: ghi method + path vào ticket trước khi nói “404”.
Case study 2 — Sinh viên: 200 nhưng “không có data”
Bài tập gọi GET /api/me. Status 200, UI vẫn “Chưa đăng nhập”. Response body: { "user": null } vì thiếu cookie session (gọi từ file HTML file:// hoặc quên credentials: 'include').
Status không báo lỗi. Đọc body + cookie request mới thấy. Đây là lý do bài này đặt request/response trước cheat sheet 4xx/5xx.
HTTP trên wire vs “thấy trong app”
| Cách xem | Giới hạn |
|---|---|
| DevTools Network | Đúng nhất cho web app; thấy CORS, cookie, redirect |
| Postman / Insomnia | Không enforce CORS trình duyệt; dễ “ảo giác API ổn” |
| curl | Tốt để tái hiện header; nhớ gắn Origin nếu debug CORS |
| Log server | Thấy request đã tới chưa — cần requestId khớp |
Outsourcing Việt Nam hay làm việc remote: thống nhất template báo lỗi (method, URL, status, 5–10 dòng body, requestId) giảm round-trip với khách nước ngoài.
Liên hệ CORS và HTTPS (chỉ đủ để định hướng)
- CORS là chính sách trình duyệt trên response (và preflight OPTIONS) — không phải “lỗi JSON”. Khi local khác port, đọc thêm CORS trên localhost.
- HTTPS mã hóa kênh; status/body vẫn đọc được trong DevTools trên máy bạn. Hết hạn chứng chỉ là lỗi tầng TLS — request có thể không tới app.
Không nhét DNS/SSL checklist vào đây: góc bài là request/response basics.
Khi nào mở cheat sheet status code
Mở HTTP status code 4xx/5xx khi bạn đã có:
- Method + URL đầy đủ
- Biết body/header request đã gửi
- Cần phân nhánh: 401 vs 403, 400 vs 422, 502 vs 503
Thứ tự học hiệu quả:
- Đọc exchange (bài này)
- Phân nhóm 2xx/4xx/5xx
- Chi tiết từng mã hay gặp
- Tool phụ: JSON formatter để đọc body, JWT decode khi debug 401 — tùy tình huống
Checklist in ra giấy / note
- Đúng request (không nhầm analytics)
- Method khớp docs
- Host/path đúng môi trường
- Auth header/cookie có mặt
- Content-Type khớp body
- Status + 5 dòng body (che PII) đã copy
- Mới tra ý nghĩa status / escalate
Tóm tắt mang đi
- HTTP = request + response; status chỉ là một dòng của response.
- Method, URL, header, body giải thích hầu hết “lỗi API” trước khi thuộc RFC.
- Network tab là nguồn sự thật cho web; Postman không thay được CORS.
- Ticket hay = exchange đầy đủ, không chỉ một số.
- Sau khi đọc được exchange → cheat sheet status code.
Bookmark nếu bạn thường bị hỏi “lỗi gì?” mà mới chỉ biết trả lời một mã số.