XMLHttpRequest.getResponseHeader() — Methode · JavaScript-Referenz

Signatur

XMLHttpRequest.prototype.getResponseHeader(headerName)

Beschreibung

Mit getResponseHeader() liest du einen einzelnen Header aus der HTTP-Antwort eines XMLHttpRequest. Typische Fälle sind Content-Type (um zu entscheiden, wie die Antwort verarbeitet wird), Content-Length, ETag, Last-Modified oder eigene Header wie X-Total-Count für die Seitenaufteilung.

Groß- und Kleinschreibung spielt beim Header-Namen keine Rolle. Kommt ein Header mehrfach in der Antwort vor, werden alle Werte in einem String zusammengefasst, getrennt durch Komma und Leerzeichen (", ").

Brauchbare Werte gibt es erst, wenn die Header angekommen sind, also ab readyState HEADERS_RECEIVED (2). Vorher und bei Netzwerkfehlern liefert die Methode null. Willst du alle Header auf einmal lesen, nimm getAllResponseHeaders().

Bei Anfragen an einen anderen Ursprung (CORS) sind nur die CORS-safelisted Antwort-Header lesbar: Cache-Control, Content-Language, Content-Length, Content-Type, Expires, Last-Modified und Pragma. Alle anderen muss der Server ausdrücklich über Access-Control-Expose-Headers freigeben.

Parameter

Name	Typ	Default	Beschreibung
$headerName Pflicht	string		Name des gesuchten Antwort-Headers, z. B. `"Content-Type"`. Groß- und Kleinschreibung wird ignoriert.

Rückgabewert

Typ

string | null

Beschreibung

Den Wert des Headers als String; mehrere gleichnamige Header werden mit ", " verbunden. null, wenn noch keine Antwort-Header vorliegen, der Header fehlt oder der Zugriff darauf gesperrt ist (CORS, Set-Cookie).

Beispiele

Antwort je nach Content-Type verarbeiten

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/daten');

xhr.addEventListener('load', () => {
  const typ = xhr.getResponseHeader('content-type') ?? '';

  if (typ.includes('application/json')) {
    const daten = JSON.parse(xhr.responseText);
    console.log('JSON erhalten:', daten);
  } else {
    console.log('Text erhalten:', xhr.responseText);
  }
});

xhr.send();

JSON erhalten: { id: 1, name: 'Beispiel' }

Seitenaufteilung über eigenen Header auslesen

const ladeSeite = (seite) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `/api/artikel?page=${seite}`);
  xhr.responseType = 'json';

  xhr.onload = () => {
    // Bei Cross-Origin muss der Server
    // "Access-Control-Expose-Headers: X-Total-Count" senden
    const gesamt = Number(xhr.getResponseHeader('X-Total-Count') ?? 0);
    resolve({ eintraege: xhr.response, gesamt });
  };
  xhr.onerror = () => reject(new Error('Netzwerkfehler'));
  xhr.send();
});

const { eintraege, gesamt } = await ladeSeite(1);
console.log(`${eintraege.length} von ${gesamt} Artikeln geladen`);

20 von 137 Artikeln geladen

Header früh lesen und große Downloads abbrechen

const xhr = new XMLHttpRequest();
xhr.open('GET', '/dateien/video.mp4');

xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
    const groesse = Number(xhr.getResponseHeader('Content-Length'));
    console.log(`Dateigröße: ${(groesse / 1024 / 1024).toFixed(1)} MB`);

    if (groesse > 50 * 1024 * 1024) {
      console.log('Zu groß – Download abgebrochen');
      xhr.abort();
    }
  }
};

xhr.send();

Dateigröße: 84.3 MB Zu groß – Download abgebrochen

// Wichtig · Fallstricke

Zeitpunkt: Vor readyState 2 (HEADERS_RECEIVED) sowie nach abort() oder einem Netzwerkfehler ist das Ergebnis immer null.
CORS: Bei Cross-Origin-Anfragen sind außer den safelisted Headern alle anderen nur lesbar, wenn der Server sie in Access-Control-Expose-Headers aufführt. Sonst kommt stillschweigend null zurück, ohne Fehlermeldung.
Verbotene Header: Set-Cookie und Set-Cookie2 gibt der Browser nie an Skripte heraus, auch nicht beim gleichen Ursprung.
Mehrfach-Header: Mehrere Werte werden zu "a, b" verbunden. Das ist bei Headern problematisch, deren Werte selbst Kommas enthalten (z. B. Datumsangaben). Bei Bedarf mit getAllResponseHeaders() selbst zerlegen.
Prüfe immer auf null, z. B. mit ?? '', bevor du String-Methoden aufrufst.
Die Methode gibt es in allen Browsern. In neuem Code ist oft fetch() mit response.headers.get() die modernere Alternative.

Siehe auch

XMLHttpRequest.getAllResponseHeaders() XMLHttpRequest.setRequestHeader() XMLHttpRequest.readyState XMLHttpRequest Headers.get() XMLHttpRequest.setPrivateToken()