HTTP Headers Guide
Master HTTP request and response headers. Learn about content types, authentication, caching, CORS, and security headers.
Table of Contents
What Are HTTP Headers?
HTTP headers are key-value pairs sent between client and server in HTTP requests and responses. They provide metadata about the communication: content type, caching rules, authentication, and more.
Headers allow clients and servers to pass additional information beyond the URL and body. Understanding headers is crucial for debugging APIs, implementing caching, and building secure applications.
In browser DevTools: Network tab → Click request → View Headers section
Request Headers
Sent by the client to the server:
Content-Type
Specifies the format of the request body:
Content-Type: application/json
Content-Type: application/x-www-form-urlencoded
Content-Type: multipart/form-data
Content-Type: text/plain
Accept
Tells server what content types the client can handle:
Accept: application/json
Accept: text/html, application/xhtml+xml
Accept: image/webp, image/png, */*
Authorization
Provides credentials for authentication:
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
Authorization: API-Key your-api-key-here
User-Agent
Identifies the client (browser, app):
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/120.0.0.0
Cookie
Sends cookies previously set by the server:
Cookie: session_id=abc123; user_pref=dark_mode
Referer
URL of the previous page (where user came from):
Referer: https://example.com/search?q=api
Accept-Language
Preferred languages for response:
Accept-Language: en-US,en;q=0.9,es;q=0.8
If-None-Match / If-Modified-Since
Conditional requests for caching:
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
If-Modified-Since: Wed, 21 Oct 2026 07:28:00 GMT
Response Headers
Sent by the server to the client:
Content-Type
Specifies the format of the response body:
Content-Type: application/json; charset=utf-8
Content-Type: text/html; charset=utf-8
Content-Type: image/png
Content-Length
Size of the response body in bytes:
Content-Length: 348
Set-Cookie
Instructs browser to store a cookie:
Set-Cookie: session_id=abc123; HttpOnly; Secure; SameSite=Strict; Max-Age=3600
- HttpOnly: Can't be accessed by JavaScript (XSS protection)
- Secure: Only sent over HTTPS
- SameSite: CSRF protection (Strict, Lax, None)
- Max-Age: Expiration time in seconds
Cache-Control
Caching directives:
Cache-Control: no-cache (must revalidate)
Cache-Control: no-store (don't cache at all)
Cache-Control: max-age=3600 (cache for 1 hour)
Cache-Control: public, max-age=31536000 (cache for 1 year)
ETag
Resource version identifier for caching:
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified
When the resource was last changed:
Last-Modified: Wed, 21 Oct 2026 07:28:00 GMT
Location
Used for redirects (with 3xx status codes):
Location: https://example.com/new-page
Content Negotiation
Client and server negotiate response format:
Accept vs Content-Type
// Client Request
GET /api/users
Accept: application/json
// Server Response
HTTP/1.1 200 OK
Content-Type: application/json
{"users": [...]}
Compression
// Client Request
Accept-Encoding: gzip, deflate, br
// Server Response
Content-Encoding: gzip
[compressed data]
Authentication Headers
Bearer Token (JWT)
// Request
GET /api/profile
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
// Response (if unauthorized)
HTTP/1.1 401 Unauthorized
WWW-Authenticate: Bearer realm="API"
Basic Authentication
Authorization: Basic base64(username:password)
Never send credentials in URLs or store tokens in localStorage. Use HttpOnly cookies or secure storage for sensitive data.
CORS & Security Headers
CORS (Cross-Origin Resource Sharing)
Allow or block requests from different domains:
// Preflight Request (OPTIONS)
Origin: https://frontend.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
// Preflight Response
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 3600
Common CORS Headers
Access-Control-Allow-Origin: * (allow all - use cautiously)
Access-Control-Allow-Origin: https://app.com (specific origin)
Access-Control-Allow-Credentials: true (allow cookies)
Access-Control-Expose-Headers: X-Custom-Header (expose custom headers)
Security Headers
// Prevent clickjacking
X-Frame-Options: DENY
// Block MIME type sniffing
X-Content-Type-Options: nosniff
// XSS protection
X-XSS-Protection: 1; mode=block
// HTTPS enforcement
Strict-Transport-Security: max-age=31536000; includeSubDomains
// Content Security Policy
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'
Custom Headers
Prefix custom headers with X- (though this convention is deprecated):
X-Request-ID: abc-123-def-456
X-Rate-Limit-Remaining: 4999
X-API-Version: 2.0
Common Patterns
API Request with All Headers
POST /api/users HTTP/1.1
Host: api.example.com
Content-Type: application/json
Accept: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...
User-Agent: MyApp/1.0
Accept-Encoding: gzip, deflate
Content-Length: 54
{"name":"John Doe","email":"[email protected]"}
API Response with Headers
HTTP/1.1 201 Created
Content-Type: application/json; charset=utf-8
Content-Length: 89
Cache-Control: no-cache
ETag: "v2.0-abc123"
X-Request-ID: req-789
X-Rate-Limit-Remaining: 4998
Access-Control-Allow-Origin: https://app.com
{"id":123,"name":"John Doe","email":"[email protected]"}
Debugging Headers
// cURL
curl -i https://api.example.com/users
curl -H "Authorization: Bearer TOKEN" https://api.example.com/profile
// JavaScript (Fetch API)
fetch('https://api.example.com/users', {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
}
})
- Always set
Content-Typecorrectly - Use HTTPS and set
Secureflag on cookies - Implement security headers (CSP, X-Frame-Options)
- Configure CORS properly (don't just allow *)
- Use ETags and caching for performance
- Log request IDs for debugging
Common Mistakes
- ❌ Missing
Content-Typeheader - ❌ CORS misconfiguration blocking legitimate requests
- ❌ Not setting
HttpOnlyon session cookies - ❌ Caching sensitive data
- ❌ Exposing internal errors in headers
HTTP headers are the hidden glue of web communication. Master them to build secure, performant, and debuggable web applications.