Browser → [Request Headers] → Server processes → [Response Headers] → Browser renders

Headers are key-value pairs.
They control caching, security, content type, authentication, and more.
Most work automatically — but when things break, headers are usually why.

GET /api/users HTTP/1.1
Host: api.example.com          # REQUIRED. Domain of the server
User-Agent: Mozilla/5.0 ...    # Client software info
Accept: application/json       # What response formats I accept
Accept-Language: en-US         # Preferred language
Connection: keep-alive         # Reuse TCP connection

# Tell the server what you want back
Accept: application/json        # JSON data
Accept: text/html               # HTML page
Accept: */*                     # Anything (default)
Accept: text/html,application/xhtml+xml;q=0.9,*/*;q=0.8  # With priorities!

# What encoding you accept
Accept-Encoding: gzip, deflate, br   # Compression preference

# What language
Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8

# Basic Auth (base64 encoded credentials)
Authorization: Basic dXNlcjpwYXNz  # "user:pass" base64-encoded

# Bearer Token (JWT / OAuth2)
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...

# API Key (various patterns)
Authorization: ApiKey abc123def456
X-API-Key: abc123def456

# "Only give me this if it changed since..."
If-None-Match: "33a64df5514310bf564"  # ETag value from last response
If-Modified-Since: Wed, 21 Oct 2026 07:28:00 GMT  # Last-Modified timestamp

# Server responds:
# → 200 OK + full data (if changed)
# → 304 Not Modified, no body (if NOT changed) ← SAVES BANDWIDTH!

# Browser sends this before cross-origin requests:
OPTIONS /api/data HTTP/1.1
Origin: https://myapp.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization

# Server must respond with matching permissions:
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400           # Cache preflight for 24h

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 1234
Date: Tue, 26 May 2026 00:33:00 GMT
Server: nginx/1.24.0              # Hide or customize this in production!

# Version 1: Expiration-based
Cache-Control: public, max-age=3600      # Cache for 1 hour (CDN + browser)
Cache-Control: private, max-age=300     # Only browser cache (5 min), not CDN
Cache-Control: no-cache                  # Must revalidate with server each time
Cache-control: no-store                  # Never cache (API responses, auth pages)
Cache-Control: immutable, max-age=31536000 # Never revalidate (hashed assets)

# Version 2: Validation tags (used WITH no-cache)
ETag: "33a64df5514310bf564"             # Unique content hash/ID
Last-Modified: Wed, 21 Oct 2026 07:28:00 GMT  # Modification timestamp

# Practical examples:

# Static assets (CSS/JS/images) — AGGRESSIVE caching
Cache-Control: public, max-age=31536000, immutable
# Files with hash in name: main.a1b2c3d4.css → never changes

# HTML pages — SHORT cache, always validate
Cache-Control: public, max-age=0, must-revalidate
ETag: "abc123"

# API responses — NO cache by default
Cache-Control: no-store
# Unless it's a rarely-changing public API:
Cache-Control: public, max-age=60, stale-while-revalidate=300

# Prevent clickjacking
X-Frame-Options: SAMEORIGIN
# Or: DENY (no framing at all)

# Prevent MIME sniffing
X-Content-Type-Options: nosniff

# XSS protection (legacy but still useful)
X-XSS-Protection: 1; mode=block

# Control referrer information
Referrer-Policy: strict-origin-when-cross-origin

# Permissions Policy (replaces Feature-Policy)
Permissions-Policy: camera=(), microphone=(), geolocation=()

# THE BIG ONE: Content Security Policy
Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'unsafe-inline' cdn.example.com;
  style-src 'self' 'unsafe-inline' fonts.googleapis.com;
  font-src 'self' fonts.gstatic.com;
  img-src 'self' data: https:;
  connect-src 'self' api.example.com wss://ws.example.com;
  frame-ancestors 'self';
  base-uri 'self';
  form-action 'self';

# Strict Transport Security (force HTTPS)
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
# Tells browser: "For the next year, only use HTTPS, never HTTP"

# For cross-origin API access:
Access-Control-Allow-Origin: https://myapp.com    # Specific origin (best!)
Access-Control-Allow-Origin: *                    # Public API (any origin)
Access-Control-Allow-Credentials: true            # Allow cookies/auth headers
Access-Control-Expose-Headers: X-Request-ID, X-RateLimit-Remaining
Access-Control-Max-Age: 86400                      # Preflight cache duration

# Tell clients their rate limit status:
X-RateLimit-Limit: 100            # Max requests per window
X-RateLimit-Remaining: 73         # How many left
X-RateLimit-Reset: 1716675800      # Unix timestamp when window resets
Retry-After: 60                   # Seconds until they can try again (for 429s)

# See all response headers
curl -I https://example.com/api/users

# See request AND response headers
curl -v https://example.com/api/users

# Custom headers
curl -H "Authorization: Bearer token123" \
  -H "Accept: application/json" \
  https://example.com/api/me

# Follow redirects and see each hop's headers
curl -vL https://example.com/redirect

# Check caching behavior
curl -I -H "If-None-Match: \"some-etag\"" \
  https://example.com/data
# Should return 304 if ETag matches!

F12 → Network tab → Click any request → Headers section

Key areas to check:
1. General → Request URL, Method, Status Code
2. Request Headers → What your browser sent
3. Response Headers → What the server sent back
4. Preview/Parsed → Formatted response body

Pro tip: Right-click column headers → Manage Columns → Enable:
→ "Remote Address" (which server IP?)
→ "Time" (how long did it take?)
→ "Initiator" (what triggered this request?)

Problem: CORS error on frontend
Fix: Check Access-Control-Allow-Origin on server response
Note: Credentials mode requires specific origin, not *

Problem: Assets not updating after deploy
Fix: Check Cache-Control headers, add cache-busting query param or hash filename

Problem: 400 Bad Request on POST
Fix: Check Content-Type header matches what server expects (application/json)

Problem: Downloads showing as text in browser
Fix: Set Content-Disposition: attachment; filename="file.pdf"

Problem: API works in Postman but not browser
Fix: Usually CORS or missing Content-Type header. Check preflight OPTIONS response.

Problem: Images not loading from CDN
Fix: Check referrer policy or hotlink protection headers