req.headers for HTTP headers in Express - Mini Project: Build & Apply

Accessing HTTP Headers with req.headers in Express

📖 Scenario: You are building a simple Express server that needs to read HTTP headers sent by clients. HTTP headers carry important information like user agents or custom tokens.

🎯 Goal: Create an Express server that reads the req.headers object to access HTTP headers and sends back a response showing one specific header value.

📋 What You'll Learn

Create an Express app with a single GET route at '/'

Use req.headers to access the HTTP headers object

Extract the user-agent header from req.headers

Send a response that includes the user-agent header value

💡 Why This Matters

🌍 Real World

Web servers often need to read HTTP headers to understand client details, like browser type or authentication tokens.

💼 Career

Knowing how to access HTTP headers with req.headers is essential for backend developers working with Express to handle requests properly.

1

Set up Express app and import express

Write code to import express and create an Express app instance called app.

Express

const express = require('express');
// Your code here

Hint

Use require('express') to import Express and call it to create app.

2

Create a GET route at '/'

Add a GET route handler on app for path '/' with parameters req and res.

Express

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  // Your code here
});

Hint

Use app.get with path '/' and a callback with req and res.

3

Access the user-agent header from req.headers

Inside the GET route, create a variable called userAgent and set it to req.headers['user-agent'] to get the user agent string.

Express

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  // Your code here
});

Hint

Use bracket notation req.headers['user-agent'] to get the header value.

4

Send the user-agent header value in the response

Use res.send to send a string response that says User Agent: followed by the userAgent variable.

Express

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const userAgent = req.headers['user-agent'];
  // Your code here
});

Hint

Use template strings with backticks to include userAgent in the response.

Practice

1. What does req.headers represent in an Express app?

easy

A. A function to send headers to the client

B. An object containing all HTTP headers sent by the client

C. A string with the URL path of the request

D. A number representing the HTTP status code

Solution

1. Step 1: Understand the role of req.headers

   req.headers holds all headers sent by the client in the HTTP request.

2. Step 2: Identify what req.headers contains

   It is an object with keys as header names (lowercase) and values as header values.

3. Final Answer:

   An object containing all HTTP headers sent by the client -> Option B

4. Quick Check:

   req.headers = client headers [OK]

Hint: Remember: req.headers holds client headers as an object [OK]

Common Mistakes:

• Thinking req.headers is a function
• Confusing headers with URL or status code
• Expecting headers keys to be uppercase

2. Which of the following is the correct way to access the 'content-type' header from req.headers?

easy

A. req.headers.Content-Type

B. req.headers['Content-Type']

C. req.headers.contentType

D. req.headers['content-type']

Solution

1. Step 1: Recall header key casing in req.headers

   Headers keys are always lowercase in req.headers.

2. Step 2: Choose the correct syntax to access the header

   Use bracket notation with lowercase key: req.headers['content-type'].

3. Final Answer:

   req.headers['content-type'] -> Option D

4. Quick Check:

   Headers keys are lowercase strings [OK]

Hint: Use lowercase keys with bracket notation for headers [OK]

Common Mistakes:

• Using camelCase or uppercase keys
• Using dot notation with hyphenated keys
• Assuming headers keys keep original case

3. Given this Express code snippet:

app.get('/', (req, res) => {
  const userAgent = req.headers['user-agent'];
  res.send(userAgent);
});

What will the server send back to the client?

medium

A. An error because 'user-agent' is not a valid header

B. The server's operating system name

C. The client's browser user agent string

D. An empty string

Solution

1. Step 1: Identify what req.headers['user-agent'] contains

   This header holds the client's browser and system info string.

2. Step 2: Understand the response sent

   The server sends back this string as the response body using res.send().

3. Final Answer:

   The client's browser user agent string -> Option C

4. Quick Check:

   req.headers['user-agent'] = client info [OK]

Hint: User-Agent header shows client browser info [OK]

Common Mistakes:

• Thinking it returns server info
• Assuming 'user-agent' header is invalid
• Expecting an error or empty response

4. What is wrong with this code snippet?

app.get('/data', (req, res) => {
  const auth = req.headers.Authorization;
  if (!auth) {
    res.status(401).send('Unauthorized');
  } else {
    res.send('Access granted');
  }
});

medium

A. Header keys in req.headers are lowercase, so 'Authorization' should be 'authorization'

B. Header keys in req.headers are case-sensitive and 'Authorization' is correct

C. You cannot access headers directly from req.headers

D. res.status() cannot be chained with res.send()

Solution

1. Step 1: Check header key casing in req.headers

   All header keys are lowercase, so 'Authorization' is incorrect.

2. Step 2: Correct the header key usage

   Use req.headers.authorization to access the Authorization header properly.

3. Final Answer:

   Header keys in req.headers are lowercase, so 'Authorization' should be 'authorization' -> Option A

4. Quick Check:

   Headers keys are lowercase strings [OK]

Hint: Always use lowercase keys for req.headers access [OK]

Common Mistakes:

• Using uppercase or camelCase header keys
• Thinking headers are case-sensitive as sent
• Believing res.status() and res.send() can't chain

5. You want to check if a client sent a custom header named 'X-Client-Id' and respond with 'Client ID: <id>'. Which code correctly handles this in Express?

hard

A. const clientId = req.headers['x-client-id']; if(clientId) res.send(`Client ID: ${clientId}`); else res.send('No Client ID');

B. const clientId = req.headers.xClientId; if(clientId) res.send(`Client ID: ${clientId}`); else res.send('No Client ID');

C. const clientId = req.headers['X-Client-Id']; if(clientId) res.send(`Client ID: ${clientId}`); else res.send('No Client ID');

D. const clientId = req.headers.get('X-Client-Id'); if(clientId) res.send(`Client ID: ${clientId}`); else res.send('No Client ID');

Solution

1. Step 1: Understand header key casing in req.headers

   Headers keys are lowercase, so use req.headers['x-client-id'].

2. Step 2: Verify the correct way to access custom headers

   const clientId = req.headers['x-client-id']; if(clientId) res.send(`Client ID: ${clientId}`); else res.send('No Client ID'); uses lowercase key and bracket notation correctly to get the header value.

3. Step 3: Check other options

   const clientId = req.headers['X-Client-Id']; if(clientId) res.send(`Client ID: ${clientId}`); else res.send('No Client ID'); uses uppercase keys (wrong), B uses camelCase (wrong), D uses req.headers.get('X-Client-Id') which doesn't exist on req.headers.

4. Final Answer:

   const clientId = req.headers['x-client-id']; if(clientId) res.send(`Client ID: ${clientId}`); else res.send('No Client ID'); -> Option A

5. Quick Check:

   Headers keys lowercase in req.headers [OK]

Hint: Custom headers keys are lowercase in req.headers [OK]

Common Mistakes:

• Using uppercase or camelCase keys
• Confusing req.headers with req.get()
• Accessing headers with dot notation for hyphenated names