HTTP Headers

Request headers provide the server with information about the client and the request.

Essential Request Headers

Header	Purpose	Example
Host	Target domain (required in HTTP/1.1)	api.example.com
User-Agent	Client software identification	Mozilla/5.0... Chrome/120.0
Accept	Preferred response content types	application/json, text/html
Accept-Language	Preferred languages	en-US, en;q=0.9, fr;q=0.8
Accept-Encoding	Compression algorithms	gzip, deflate, br
Authorization	Authentication credentials	Bearer eyJhbGciOi...
Cookie	Stored cookies	session=abc123; theme=dark
Content-Type	Body format	application/json
Content-Length	Body size in bytes	1234
Cache-Control	Caching directives	no-cache, max-age=0
If-None-Match	ETag for conditional requests	"abc123"
If-Modified-Since	Date for conditional requests	Sat, 01 Jan 2024
Referer	Previous page URL	https://google.com/search
Origin	Request origin (CORS)	https://www.example.com

Content Negotiation

Clients tell servers what they accept:

Accept: text/html, application/json;q=0.9, */*;q=0.8
                |            |                |
        priority 1.0    priority 0.9    priority 0.8

Accept-Language: en-US, en;q=0.9, fr;q=0.8
Accept-Encoding: gzip, deflate, br

Conditional Request Headers

// Only send if resource changed
If-None-Match: "etag-value"
If-Modified-Since: Sat, 01 Jan 2024 00:00:00 GMT

// Send only if conditions met
If-Match: "etag-value"
If-Unmodified-Since: Sat, 01 Jan 2024
If-Range: "etag-value"

Response headers control how the browser handles the response.

Essential Response Headers

Header	Purpose	Example
Content-Type	Response body format	application/json; charset=utf-8
Content-Length	Body size in bytes	1234
Content-Encoding	Compression used	gzip
Set-Cookie	Store cookies on client	session=abc123; HttpOnly; Secure
Cache-Control	Caching instructions	max-age=3600, private
ETag	Resource version identifier	"abc123"
Last-Modified	When resource was last changed	Sat, 01 Jan 2024
Location	Redirect URL	/new-page
Access-Control-Allow-Origin	CORS permission	*
Server	Server software	nginx/1.24.0

Caching Headers

// Strong caching (browser doesn't check)
Cache-Control: max-age=3600        // Cache for 1 hour
Cache-Control: immutable            // Never changes
Expires: Sat, 01 Jan 2025 00:00:00  // Deprecated

// Validation (browser checks with server)
Cache-Control: no-cache             // Must revalidate
ETag: "abc123"                      // Version identifier
Last-Modified: Sat, 01 Jan 2024     // Last change date

// No caching
Cache-Control: no-store             // Don't cache at all
Cache-Control: no-cache, no-store   // Maximum freshness

Security Headers

Strict-Transport-Security: max-age=31536000; includeSubDomains
// Force HTTPS for 1 year

X-Content-Type-Options: nosniff
// Prevent MIME type sniffing

X-Frame-Options: DENY
// Prevent clickjacking (iframe)

X-XSS-Protection: 1; mode=block
// Enable XSS filter (legacy)

Content-Security-Policy: default-src 'self'
// Restrict resource loading

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

Permissions-Policy: camera=(), microphone=()
// Restrict browser features

Custom headers extend HTTP for application-specific needs.

Custom Header Convention

Custom headers typically use the X- prefix (deprecated but still common):

X-Request-ID: 123e4567-e89b-12d3-a456-426614174000
X-User-ID: 12345
X-Client-Version: 2.1.0
X-Forwarded-For: 203.0.113.195

Common Custom Headers

Header	Purpose
X-Request-ID	Request tracing across services
X-User-ID	Authenticated user identifier
X-Forwarded-For	Client IP (behind proxy)
X-Real-IP	Actual client IP
X-RateLimit-Limit	Rate limit maximum
X-RateLimit-Remaining	Requests remaining
X-RateLimit-Reset	When limit resets

API Versioning Headers

// Header-based versioning
Accept: application/vnd.api.v2+json
API-Version: 2
X-API-Version: 2

// Response headers
API-Version: 2
Deprecation: true
Sunset: Sat, 01 Jan 2025

Debugging Headers

X-Request-ID: abc-123-def-456
X-Response-Time: 45ms
X-Served-By: server-03
X-Cache: HIT
X-Cache-Hits: 5

Reading Custom Headers in JavaScript

// Fetch API
const response = await fetch('/api/data');
const requestId = response.headers.get('X-Request-ID');
const rateLimit = response.headers.get('X-RateLimit-Remaining');

// List all headers
response.headers.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// Sending custom headers
fetch('/api/data', {
  headers: {
    'X-Request-ID': generateUUID(),
    'X-User-ID': userId,
    'Authorization': `Bearer ${token}`
  }
});