Response.headers — Eigenschaft · JavaScript-Referenz

Signatur

Response.headers

Beschreibung

Über Response.headers liest du die HTTP-Header einer Antwort aus, etwa das Ergebnis eines fetch()-Aufrufs. Die Eigenschaft liefert ein Headers-Objekt mit Methoden wie get(), has(), forEach() und entries(). Header-Namen werden dabei ohne Beachtung der Groß-/Kleinschreibung verglichen.

Typische Anwendungen: den Content-Type prüfen, bevor du den Body mit json() oder text() ausliest, Metadaten für die Seitenaufteilung (Pagination) wie Link oder X-Total-Count lesen, Hinweise zum Caching (ETag, Last-Modified) auswerten oder Rate-Limit-Header überwachen.

Die Eigenschaft selbst ist schreibgeschützt, du kannst ihr also kein neues Objekt zuweisen. Ob das zurückgegebene Headers-Objekt veränderbar ist, hängt von seinem internen „Guard“ ab: Bei Antworten von fetch() ist es unveränderlich (immutable), bei selbst erzeugten Antworten mit new Response(), etwa in einem Service Worker, lässt es sich ändern.

Rückgabewert

Typ

Headers

Beschreibung

Ein Headers-Objekt mit allen Antwort-Headern, die für das Skript sichtbar sind.

Beispiele

Content-Type prüfen, bevor der Body gelesen wird

const ladeDaten = async (url) => {
  const response = await fetch(url);
  const typ = response.headers.get('content-type') ?? '';

  if (typ.includes('application/json')) {
    return response.json();
  }
  return response.text();
};

ladeDaten('https://jsonplaceholder.typicode.com/todos/1')
  .then((daten) => console.log(daten));

{ userId: 1, id: 1, title: 'delectus aut autem', completed: false }

Alle Header auflisten

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');

for (const [name, wert] of response.headers) {
  console.log(`${name}: ${wert}`);
}

// Als einfaches Objekt
const alsObjekt = Object.fromEntries(response.headers);
console.log(alsObjekt['content-type']);

cache-control: max-age=43200 content-type: application/json; charset=utf-8 ... application/json; charset=utf-8

Header in einer selbst erzeugten Response ändern (z. B. im Service Worker)

const response = new Response(JSON.stringify({ ok: true }), {
  headers: { 'Content-Type': 'application/json' }
});

response.headers.set('X-Cache', 'HIT');
console.log(response.headers.get('x-cache'));
console.log(response.headers.has('Content-Type'));

HIT true

Header einer fetch-Antwort über eine Kopie ändern

const original = await fetch('/api/daten');

// original.headers.set(...) würde einen TypeError werfen (immutable)
const neueHeader = new Headers(original.headers);
neueHeader.set('X-Bearbeitet', 'ja');

const geaendert = new Response(original.body, {
  status: original.status,
  statusText: original.statusText,
  headers: neueHeader
});
console.log(geaendert.headers.get('x-bearbeitet'));

ja

// Wichtig · Fallstricke

CORS: Bei Cross-Origin-Anfragen sind nur die als sicher geltenden Header (CORS-safelisted Response Headers) sichtbar, also Cache-Control, Content-Language, Content-Length, Content-Type, Expires, Last-Modified und Pragma. Weitere Header muss der Server über Access-Control-Expose-Headers freigeben, sonst liefert get() den Wert null.
Opake Antworten (mode: 'no-cors', response.type === 'opaque') haben ein leeres Headers-Objekt.
Set-Cookie ist im Browser nie lesbar. In Node.js und anderen serverseitigen Laufzeitumgebungen gibt es dafür headers.getSetCookie().
Bei fetch()-Antworten sind die Header unveränderlich. set(), append() oder delete() werfen dort einen TypeError.
Kommt ein Header mehrfach vor, fasst get() die Werte kommagetrennt zu einem String zusammen.
Namen beim Durchlaufen werden immer kleingeschrieben ausgegeben.

Siehe auch

Headers Response Headers.prototype.get() Request.headers Response.status PaymentResponse.methodName