Request.url — Eigenschaft · JavaScript-Referenz

Signatur

Request.url

Beschreibung

Die Eigenschaft Request.url gibt die URL einer Anfrage als String zurück. Beim Erzeugen eines Request wird die übergebene URL gegen die Basis-URL des Dokuments (bzw. des Workers) aufgelöst und normalisiert. Relative Pfade wie /api/users werden daher zu absoluten URLs wie https://example.com/api/users.

Besonders nützlich ist url in Service Workern: Im fetch-Event liest man event.request.url aus, um Anfragen zu filtern, Caching-Strategien je nach Pfad anzuwenden oder Anfragen umzuleiten. Zusammen mit dem URL-Konstruktor lassen sich Pfad, Suchparameter und Herkunft bequem auswerten.

Die Eigenschaft ist schreibgeschützt. Um eine Anfrage mit anderer URL zu erzeugen, erstellt man mit new Request(neueUrl, alterRequest) ein neues Objekt, das die übrigen Optionen übernimmt.

Ein Fragment (#abschnitt) bleibt in url erhalten, wird aber nie an den Server gesendet.

Rückgabewert

Typ

string

Beschreibung

Die absolute, serialisierte URL der Anfrage (z. B. "https://example.com/api/items?page=2").

Beispiele

URL einer Anfrage auslesen

const request = new Request('https://example.com/api/items?page=2', {
  method: 'GET'
});

console.log(request.url);

https://example.com/api/items?page=2

Relative URL wird aufgelöst und normalisiert

// Im Browser auf https://example.com/shop/index.html ausgeführt
const request = new Request('../api/./produkte?id=5');

console.log(request.url);

https://example.com/api/produkte?id=5

Service Worker: Anfragen anhand der URL filtern

// sw.js
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);

  // Nur Bilder der eigenen Herkunft aus dem Cache bedienen
  if (url.origin === self.location.origin && url.pathname.startsWith('/images/')) {
    event.respondWith(
      caches.match(event.request).then((cached) => cached ?? fetch(event.request))
    );
  }
});

Anfrage mit geänderter URL klonen

const original = new Request('https://example.com/v1/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Anna' })
});

// url ist schreibgeschützt – daher neuen Request erzeugen
const neu = new Request(original.url.replace('/v1/', '/v2/'), original);

console.log(neu.url, neu.method);

https://example.com/v2/users POST

// Wichtig · Fallstricke

Schreibgeschützt: Zuweisungen wie request.url = '...' werden stillschweigend ignoriert (im Strict Mode TypeError). Stattdessen einen neuen Request erstellen.
Normalisierung: Der Wert kann vom übergebenen String abweichen – Hostnamen werden kleingeschrieben, .//../ aufgelöst, Sonderzeichen prozentkodiert, und ein abschließender Schrägstrich wird ggf. ergänzt (https://example.com → https://example.com/). Beim String-Vergleich besser new URL() verwenden.
Keine Weiterleitungen: Request.url zeigt immer die ursprünglich angefragte URL. Die endgültige URL nach Redirects steht in Response.url.
Zugangsdaten: URLs mit eingebetteten Zugangsdaten (https://user:pass@host) führen beim Konstruktor zu einem TypeError.
Node.js: Relative URLs sind ohne Basis-URL nicht auflösbar und werfen einen TypeError; in Node.js (ab 18 global verfügbar) immer absolute URLs übergeben.

Siehe auch

Request Request.method Response.url FetchEvent.request NotRestoredReasons.url