Response.type — Eigenschaft · JavaScript-Referenz

Signatur

Response.type

Beschreibung

Die Eigenschaft Response.type zeigt, wie der Browser eine Antwort einordnet. Davon hängt ab, welche Teile der Antwort (Header, Body, Status) dein JavaScript-Code lesen darf. Der Wert ist ein String und kann nicht geändert werden.

Mögliche Werte:

"basic": Antwort vom selben Ursprung (Same-Origin). Alle Header außer Set-Cookie sind lesbar.
"cors": Gültige Cross-Origin-Antwort über CORS. Lesbar sind nur die CORS-sicheren Header und die, die der Server per Access-Control-Expose-Headers freigibt.
"opaque": Antwort auf eine Cross-Origin-Anfrage mit mode: "no-cors". Status ist 0, Header und Body sind leer und nicht lesbar.
"opaqueredirect": Antwort auf eine Anfrage mit redirect: "manual", wenn der Server umleitet. Die Umleitung wird nicht verfolgt, die Details bleiben verborgen.
"error": Netzwerkfehler, z. B. erzeugt mit Response.error(). Der Status ist 0.

Nützlich ist type vor allem in Service Workern und Caching-Logik. Dort sollte man prüfen, ob eine Antwort überhaupt lesbar oder zum Zwischenspeichern geeignet ist. Außerdem hilft es bei der Fehlersuche, wenn Cross-Origin-Anfragen unerwartet leere Daten liefern.

Rückgabewert

Typ

Beschreibung

Ein String mit dem Antworttyp. "default" steht bei Antworten, die per new Response() selbst erzeugt wurden.

Beispiele

Typ einer Same-Origin- und einer CORS-Anfrage prüfen

const pruefeTyp = async (url) => {
  const res = await fetch(url);
  console.log(url, '→', res.type);
};

await pruefeTyp('/api/daten.json');
await pruefeTyp('https://api.github.com/users/octocat');

/api/daten.json → basic https://api.github.com/users/octocat → cors

Opaque-Antwort bei no-cors erkennen

const res = await fetch('https://example.com/bild.png', { mode: 'no-cors' });

if (res.type === 'opaque') {
  // Status und Body sind nicht lesbar
  console.log(res.type, res.status, res.ok);
}

opaque 0 false

Service Worker: nur lesbare, erfolgreiche Antworten cachen

self.addEventListener('fetch', (event) => {
  event.respondWith((async () => {
    const cache = await caches.open('v1');
    const cached = await cache.match(event.request);
    if (cached) return cached;

    const res = await fetch(event.request);
    // Nur Same-Origin-/CORS-Antworten mit Status 2xx speichern
    if (res.ok && (res.type === 'basic' || res.type === 'cors')) {
      await cache.put(event.request, res.clone());
    }
    return res;
  })());
});

Selbst erzeugte Antworten und Fehlerantworten

const eigene = new Response('Hallo');
const fehler = Response.error();

console.log(eigene.type);
console.log(fehler.type, fehler.status);

default error 0

// Wichtig · Fallstricke

Opaque-Antworten sind tückisch: status ist 0 und ok ist false, auch wenn der Server eigentlich mit 200 geantwortet hat. await res.text() liefert einen leeren String. Werden opaque-Antworten im Cache Storage gespeichert, belegen sie aus Sicherheitsgründen oft deutlich mehr Kontingent (Padding), in Chrome z. B. mehrere MB pro Eintrag.
Ein Netzwerkfehler bei fetch() führt meist dazu, dass das Promise abgelehnt wird. Eine Response mit type === "error" sieht man in der Praxis vor allem dann, wenn ein Service Worker Response.error() zurückgibt.
"opaqueredirect" entsteht nur mit redirect: "manual". Das Umleitungsziel (Location-Header) kann man damit nicht auslesen.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert, im Strict Mode wirft sie einen TypeError.
In Node.js (Fetch ab Version 18) gibt es keine Same-Origin-Policy. Dort ist der Typ meist "basic" oder "default".
Kompatibilität: wird von allen modernen Browsern unterstützt, im Internet Explorer nicht.

Siehe auch

Response Response.status Response.ok Response.error() Request.mode Cache.prototype.put()