Headers.forEach() — Methode · JavaScript-Referenz

Signatur

Headers.prototype.forEach(callbackFn, thisArg)

Beschreibung

Headers.forEach() geht alle Einträge eines Headers-Objekts durch und ruft für jedes Paar die übergebene Funktion auf. Die Methode funktioniert wie Array.prototype.forEach() und eignet sich gut, um Anfrage- oder Antwort-Header zu protokollieren, zu prüfen oder in ein einfaches Objekt zu übertragen.

Die Callback-Funktion erhält die Argumente in der Reihenfolge Wert, Name, Headers-Objekt. Der Wert steht also an erster Stelle, genau wie bei Map.prototype.forEach(). Header-Namen werden immer kleingeschrieben übergeben und lexikografisch sortiert durchlaufen. Die Reihenfolge, in der sie eingefügt wurden, spielt keine Rolle.

Wurde ein Header mehrfach per append() gesetzt, liefert forEach() ihn nur einmal. Die Werte sind dann mit ", " zusammengefügt. Die einzige Ausnahme ist Set-Cookie: Jeder Wert erscheint als eigener Eintrag.

Wenn du break oder await brauchst, nimm besser for...of über headers.entries() oder direkt über das Headers-Objekt.

Parameter

Name	Typ	Default	Beschreibung
$callbackFn Pflicht	(value: string, key: string, headers: Headers) => void		Funktion, die für jedes Paar aufgerufen wird. Sie erhält `value` (Header-Wert), `key` (Header-Name in Kleinbuchstaben) und `headers` (das durchlaufene `Headers`-Objekt).
$thisArg	any	undefined	Wert, der beim Aufruf von `callbackFn` als `this` gilt. Bei Pfeilfunktionen hat er keine Wirkung.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Die Methode ist nur für Nebeneffekte gedacht und lässt sich nicht verketten.

Beispiele

Header ausgeben – sortiert und kleingeschrieben

const headers = new Headers({
  'X-Request-Id': 'abc123',
  'Content-Type': 'application/json',
  'Accept': 'text/html'
});
headers.append('Accept', 'application/xml');

headers.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

accept: text/html, application/xml content-type: application/json x-request-id: abc123

Antwort-Header einer fetch-Anfrage in ein Objekt übertragen

const loadWithHeaders = async (url) => {
  const response = await fetch(url);
  const headerObj = {};
  response.headers.forEach((value, key) => {
    headerObj[key] = value;
  });
  return { status: response.status, headers: headerObj };
};

loadWithHeaders('https://httpbin.org/get')
  .then(({ status, headers }) => console.log(status, headers['content-type']));

200 application/json

Sensible Header vor dem Loggen maskieren (mit thisArg)

const headers = new Headers({
  Authorization: 'Bearer geheim',
  'Content-Type': 'text/plain'
});

const logger = {
  secret: new Set(['authorization', 'cookie']),
  lines: []
};

headers.forEach(function (value, key) {
  this.lines.push(`${key}: ${this.secret.has(key) ? '***' : value}`);
}, logger);

console.log(logger.lines.join('\n'));

authorization: *** content-type: text/plain

// Wichtig · Fallstricke

Reihenfolge der Argumente: Der Wert kommt zuerst, der Name danach. Wer (key, value) schreibt, vertauscht die beiden. Das ist ein häufiger Fehler.
Zusammengefasste Werte: Mehrfach gesetzte Header werden mit ", " zu einem Wert verbunden. Bei Set-Cookie liefert jeder Wert einen eigenen Aufruf. Alternativ holst du alle Cookie-Werte als Array mit getSetCookie().
Kein Abbruch möglich: return beendet nur den aktuellen Aufruf. Für einen vorzeitigen Ausstieg nimm for...of. Asynchrone Callback-Funktionen werden nicht abgewartet.
Nicht alle Header sind sichtbar: Bei Cross-Origin-Antworten (CORS) siehst du nur die sicheren Antwort-Header und die per Access-Control-Expose-Headers freigegebenen. Set-Cookie ist im Browser nie lesbar.
Kompatibilität: Wird von allen modernen Browsern unterstützt. In Node.js steht die Methode seit Version 18 global zur Verfügung. Der Internet Explorer kennt die Methode nicht.

Siehe auch

Headers Headers.entries() Headers.get() Headers.getSetCookie() Headers.append()