GuidesHTTP Headers

HTTP Headers Guide

Master HTTP request and response headers. Learn about content types, authentication, caching, CORS, and security headers.

8 minute read Intermediate

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.

Viewing Headers

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
Cookie Attributes
  • 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)
Security Warning

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
  }
})
Best Practices
  • Always set Content-Type correctly
  • Use HTTPS and set Secure flag 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-Type header
  • ❌ CORS misconfiguration blocking legitimate requests
  • ❌ Not setting HttpOnly on 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.