How HTTP Works: Headers, Status Codes, Caching, and Cookies

1. Introduction: Why HTTP Still Matters

All modern web apps—REST, GraphQL, even WebSockets—are built on top of HTTP.

HTTP is more than a request/response protocol—it’s a key component of performance, security, and debugging.

Analogy: “HTTP is the diplomatic language between browsers and servers.”

2. HTTP Request and Response: The Basic Anatomy

a. Example HTTP Request Structure

GET /index.html HTTP/1.1
Host: blog.hasanh.dev
User-Agent: Mozilla/5.0
Accept: text/html

b. Example HTTP Response Structure

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024
Set-Cookie: session_id=abc123; HttpOnly

Key Components:

• Method: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS
• URL: the requested endpoint
• Headers: metadata
• Body: the actual content (usually for POST/PUT)

3. Headers: The Brain of the HTTP Protocol

Headers define how HTTP requests and responses are handled.

Types of Headers:

• Request Headers: from client (e.g., Accept, Authorization)
• Response Headers: from server (e.g., Set-Cookie, Cache-Control)
• Entity Headers: about the content (Content-Type, Content-Length)
• General Headers: apply to both request and response

Analogy: “Headers are the envelope that describes the contents of a letter.”

Important Headers:

• Content-Type, Accept
• Authorization
• Cache-Control, ETag, Expires
• Set-Cookie, Cookie, SameSite

4. Status Codes: The Server’s Sign Language

Categories:

• 1xx: Informational
• 2xx: Success (200 OK, 201 Created, 204 No Content)
• 3xx: Redirects (301, 302, 307)
• 4xx: Client Errors (400, 401, 403, 404)
• 5xx: Server Errors (500, 502, 504)

Quick Debugging Tips:

• 404? Check the route.
• 401/403? Check authentication or permissions.
• 500+? Check backend logs.

5. HTTP Caching: Speed Up, Lighten the Load

Caching improves speed and reduces server load.

Key Cache-Control Directives:

• no-store: don’t cache at all
• no-cache: cache but revalidate first
• public, private: who can cache it

Effective Combos:

• ETag + If-None-Match
• Last-Modified + If-Modified-Since

Cache Strategy:

• API: Cache-Control: no-store
• Static assets: Cache-Control: public, max-age=31536000

Use DevTools > Network to inspect cache headers.

6. Cookies: Identity & Session in the Web

Cookies are small key-value pairs sent by the browser to the server.

Common uses:

• Login sessions
• User tracking
• CSRF protection

Key Attributes:

• HttpOnly: inaccessible via JavaScript
• Secure: only over HTTPS
• SameSite: controls cross-site behavior
• Domain, Path, Max-Age

Comparison Table:

7. Full Flow Example: Login Using Cookies

1. User sends POST /login
2. Server validates and responds with Set-Cookie
3. Browser automatically stores the cookie
4. Future requests auto-include Cookie header
5. Server authenticates using cookie data

8. Common Mistakes & Best Practices

• Overaggressive caching → outdated content
• Misplaced headers → ignored by browser/server
• Insecure cookies (missing Secure and HttpOnly) → vulnerable to attacks

9. Conclusion

HTTP is more than just a bridge—it’s the foundation of web application architecture.

Mastering HTTP means:

• Faster debugging
• Safer, more performant systems

Practice it in real projects: open DevTools, try curl, or use Postman/Insomnia!