17-Apr-2025

HTTP headers are key-value pairs that provide additional information about an HTTP request or response. They are part of the message header and are transmitted before the message body (if any). Headers play a crucial role in controlling communication between clients (like web browsers) and servers.

They are broadly classified into:

• Request Headers: Sent by the client to the server, providing information about the request context, client capabilities, and desired response format.
• Response Headers: Sent by the server to the client, providing information about the response, server capabilities, and instructions for caching or rendering the content.

Here’s a breakdown of some common HTTP headers and their usage, illustrated with a JavaScript example using the fetch API:

// Making a GET request with custom headers
fetch('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'User-Agent': 'MyCustomClient/1.0', // Identify the client
    'Accept': 'application/json', // Specify desired response format
    'Authorization': 'Bearer my_token', // Authentication token
    'Cache-Control': 'no-cache',  // Instructs the browser/server to avoid caching.
    'Content-Type': 'application/json', // When you send data to the server
    'X-Requested-With': 'XMLHttpRequest' // Used for AJAX requests to identify them as such.
  }
})
  .then(response => {
    // Accessing response headers
    console.log('Content-Type:', response.headers.get('Content-Type'));
    console.log('Date:', response.headers.get('Date'));
    console.log('Server:', response.headers.get('Server'));
    return response.json(); // Process the JSON response
  })
  .then(data => {
    console.log('Response data:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });



// Example of setting headers in a server response (Node.js with Express)
const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  // ... your API logic ...

  // Setting response headers
  res.set('Content-Type', 'application/json');
  res.set('Cache-Control', 'public, max-age=3600'); // Allow caching for 1 hour
  res.set('X-My-Custom-Header', 'some-value');

  res.json({ data: 'some data' }); 
});

app.listen(3000, () => console.log('Server listening on port 3000'));

Key Considerations:

• Case-Insensitive: Header names are case-insensitive (Content-Type is the same as content-type).
• Multiple Values: Some headers can have multiple values, separated by commas.
• Standard vs. Custom Headers: There are many standardized headers (e.g., Content-Type, Authorization), but you can also create custom headers (often prefixed with X-) for application-specific needs.

Understanding and utilizing HTTP headers effectively is essential for building robust and well-behaved web applications. They enable features like caching, content negotiation, authentication, and much more.