HTTP Request Lifecycle

When you interact with a web application, every action — clicking a button, submitting a form, loading a page — triggers HTTP requests. Understanding this lifecycle is crucial for debugging and optimization.

Try it: HTTP Request Lifecycle

CLIENT

SERVER

URL Anatomy

Every request starts with a URL. A full URL includes: Protocol (https), Host (domain), Port (443), Path (/users), Query String (?limit=10), and Fragment (#section). The fragment is client-side only and never sent to the server.

Interactive: URL Anatomy

https://api.glyphtic.com:443/v1/users?limit=10&sort=name#section

Hover over a URL part or button to learn more

Query Parameters

Query strings pass data to the server via the URL in the format ?key1=value1&key2=value2

Pagination: ?page=2&limit=20
Filtering: ?status=active&role=admin
Searching: ?q=javascript
Sorting: ?sort=created_at&order=desc

Request Headers Deep Dive

Headers are key-value pairs that provide metadata about the request. They include content negotiation (Accept), authentication (Authorization, Cookie), caching directives, and CORS information.

Category	Headers	Purpose
Content Negotiation	`Accept`, `Accept-Language`, `Accept-Encoding`	What format the client wants
Authentication	`Authorization`, `Cookie`	Identity verification
Caching	`Cache-Control`, `If-Modified-Since`, `If-None-Match`	Cache management
CORS	`Origin`, `Access-Control-*`	Cross-origin security
Content Info	`Content-Type`, `Content-Length`	Body details

Interactive: HTTP Headers Inspector

Content-Type:application/json

Body format

Content-Length:1234

Body size in bytes

Content-Encoding:gzip

Body compression

Content-Type Values

Content-Type	Usage
`application/json`	JSON data (most common for APIs)
`text/html`	HTML documents
`application/x-www-form-urlencoded`	Form submissions
`multipart/form-data`	File uploads
`application/octet-stream`	Binary data

Response Headers

Header	Purpose	Example
`Content-Type`	Response format	`application/json`
`Cache-Control`	Caching instructions	`max-age=3600`
`ETag`	Resource version for conditional requests	`"abc123"`
`Set-Cookie`	Create browser cookies	`session_id=xyz; HttpOnly`
`Location`	Redirect target	Used with `3xx` status

Interactive: HTTP Status Codes

200OKRequest succeeded

201CreatedResource created (POST)

204No ContentSuccess but no body (DELETE)

HTTP Caching

Caching reduces server load and speeds up responses. The Cache-Control header controls how responses are cached.

Directive	Meaning
`public`	Can be cached by anyone (CDN, browser)
`private`	Only browser can cache (contains user data)
`no-cache`	Must revalidate before using cached copy
`no-store`	Never cache (sensitive data)
`max-age=N`	Cache for `N` seconds

Interactive: Cache Flow Visualizer

Browser

Cache

Step 1: Browser checks local cache

Fresh Cache: No network request needed

CORS (Cross-Origin Resource Sharing)

When your frontend tries to fetch from a different domain, the browser enforces Same-Origin Policy. CORS headers allow servers to specify which origins can access their resources.

For "complex" requests (non-GET with custom headers), browsers send an OPTIONS preflight request first. The server must respond with appropriate Access-Control-Allow-* headers.

Error	Cause	Fix
No `Access-Control-Allow-Origin`	Server doesn't allow your origin	Add origin to server config
Preflight response failed	`OPTIONS` request blocked	Configure server to handle `OPTIONS`
Credential not supported	Cookies not allowed cross-origin	Set `Access-Control-Allow-Credentials: true`

Interactive: CORS Preflight Flow

CLIENT

glyphtic.com

OPTIONS

POST

SERVER

api.glyphtic.com

Click a button to simulate CORS flow

Request Body Formats

JSON (Most Common)

POST /api/users HTTP/1.1
Content-Type: application/json

{
  "name": "Alice",
  "email": "alice@example.com"
}

Form Data

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded

username=alice&password=secret123

Hands-On: DevTools Network Analysis

Exercise: Analyze a Real API Request

Open DevTools → Network tab
Visit https://jsonplaceholder.typicode.com/posts
Find the /posts request and examine request method, headers, response, and timing

Exercise: Watch CORS in Action

Open the browser console
Run: fetch("https://api.github.com/users/octocat").then(r => r.json()).then(console.log)
Check the Network tab for CORS headers

Common Debugging Scenarios

Request Never Completes: Check Network tab for pending request, look for CORS errors, verify server is running
Wrong Data Returned: Inspect response body, verify endpoint URL, check for caching issues
401/403 Errors: Check Authorization header, verify token hasn't expired, confirm header format

Learning Objectives