Request and Response Headers

HTTP headers carry metadata that helps clients and servers control authentication, caching, content negotiation, security, and other request or response behavior. Frontend engineers commonly inspect and set headers when using `fetch()` and diagnosing API behavior.

A request header is metadata sent by the client to the server. Common examples include `Authorization`, `Accept`, `Content-Type`, `Cache-Control`, and `If-None-Match`. Headers describe what the client is sending, what it can accept, or how the request should be handled.

A response header is metadata returned by the server. Examples include `Content-Type`, `Content-Length`, `Cache-Control`, `ETag`, `Set-Cookie`, and security headers such as `Content-Security-Policy`. The browser can use these headers to determine how to process, cache, or protect the response.

With `fetch()`, request headers can be supplied through the `headers` option. Header values are strings, and the browser controls certain restricted headers; frontend JavaScript cannot freely set every HTTP header. For JSON APIs, `Content-Type: application/json` commonly accompanies a JSON request body.

Headers also participate in browser security rules. For example, cross-origin requests can trigger CORS processing, where response headers such as `Access-Control-Allow-Origin` tell the browser whether frontend code may access the response. Authentication headers can identify credentials, but credential handling also depends on the authentication mechanism and browser rules.

Response headers are available through the Fetch API's `Response.headers` object. Header names are case-insensitive, and multiple values can sometimes be represented according to the HTTP field's semantics. Understanding headers is therefore important for debugging authentication failures, caching behavior, CORS errors, and incorrect content handling.

Key points

• Request headers describe client preferences, credentials, and request metadata.
• Response headers describe how the client should interpret, cache, or protect the response.
• Use `fetch()`'s `headers` option to provide permitted request headers.
• `Content-Type` describes the media type of a message body; `Accept` describes response formats the client can handle.
• CORS depends on browser enforcement and relevant response headers.
• JavaScript cannot set every HTTP header because browsers restrict certain headers.

Interview questions

What are HTTP headers, and why are they useful?

HTTP headers are metadata fields attached to requests and responses. They communicate information such as content type, authentication credentials, caching instructions, and supported representations. A frontend engineer uses them frequently with `fetch()` when communicating with APIs. Headers are separate from the actual message body.

What is the difference between `Accept` and `Content-Type`?

`Accept` tells the server which response media types the client can process. `Content-Type` identifies the media type of the message body. For example, a frontend application might send JSON with `Content-Type: application/json` and request JSON responses with `Accept: application/json`. The two headers describe different directions of content expectations.

How do you set and read headers with `fetch()`?

Request headers can be supplied through the `headers` property of the `fetch()` options object. After the request completes, response headers are available through the `Response.headers` object. A specific value can be retrieved with `response.headers.get()`. Some headers are controlled or restricted by the browser and cannot simply be assigned by application code.

How do HTTP headers relate to CORS?

CORS is a browser security mechanism governing frontend access to resources on another origin. The server can provide response headers such as `Access-Control-Allow-Origin` to indicate which origins may access the response. Depending on the request, the browser may perform a preflight request using the `OPTIONS` method before sending the actual request. A CORS failure is enforced by the browser, so changing frontend code does not simply bypass the server's policy.

How can headers affect caching?

Caching behavior can be controlled or influenced by headers such as `Cache-Control`, `ETag`, `Last-Modified`, and conditional request headers. A server can provide an `ETag`, and a later client request can use `If-None-Match` to ask whether the representation has changed. If the resource is still current, the server can respond with `304 Not Modified`, allowing the cached representation to be reused. Correct caching requires considering freshness, validation, and whether the response is safe to reuse.