JavaScript Fetch: Cross-Origin-Anfragen (CORS)

Cross-Origin-Anfragen sind ein wesentlicher Bestandteil der modernen Webentwicklung und ermöglichen die Interaktion zwischen Ressourcen von verschiedenen Ursprüngen. In diesem Artikel gehen wir tiefgehend auf die Handhabung von Cross-Origin-Anfragen mit der Fetch API in JavaScript ein. Am Ende verfügen Sie über ein umfassendes Verständnis von Cross-Origin-Anfragen, deren Konfiguration sowie bewährte Praktiken für die effektive Verwaltung mit der Fetch API.

Cross-Origin-Anfragen verstehen

Cross-Origin-Anfragen entstehen, wenn eine Webanwendung Ressourcen von einem anderen Ursprung (Domain, Protokoll oder Port) anfordert als dem eigenen. Diese Anfragen sind entscheidend für den Zugriff auf APIs, das Abrufen von Daten aus externen Quellen und die Integration von Drittanbieterdiensten.

Die Bedeutung von CORS

Cross-Origin Resource Sharing (CORS) ist eine Sicherheitsfunktion, die von Browsern implementiert wurde, um zu steuern, wie Webseiten Ressourcen von verschiedenen Ursprüngen anfordern können. CORS-Richtlinien werden vom Server durch bestimmte HTTP-Header durchgesetzt.

Fetch für Cross-Origin-Anfragen verwenden

Die Fetch API bietet eine moderne und flexible Möglichkeit, HTTP-Anfragen in JavaScript zu stellen. Sie unterstützt Promises, was die Arbeit mit asynchronem Code erleichtert.

Grundlegende Fetch-Nutzung

Beginnen wir mit einem einfachen Beispiel zur Verwendung von Fetch für eine GET-Anfrage. Auf unserer vorherigen Seite zur Fetch API erfahren Sie noch viel mehr dazu.

---

Output appears here after Run.

CORS mit Fetch handhaben

Bei der Durchführung von Cross-Origin-Anfragen muss der Server bestimmte Header angeben, um die Anfrage zu erlauben. Zu den wesentlichen Headern gehören:

• Access-Control-Allow-Origin: Legt fest, welche Ursprünge auf die Ressource zugreifen dürfen.
• Access-Control-Allow-Methods: Listet die HTTP-Methoden auf, die für Cross-Origin-Anfragen erlaubt sind.
• Access-Control-Allow-Headers: Listet die Header auf, die in der Anfrage enthalten sein dürfen.

Cross-Origin-Anfragen stellen

Um eine Cross-Origin-Anfrage mit Fetch zu stellen, können Sie die Option mode auf cors setzen. Dies ist der Standardmodus für Cross-Origin-Anfragen. Er ermöglicht die Anfrage, wenn der Server dies explizit über CORS-Header erlaubt. Hier ist ein Beispiel:

WARNING

Verwenden Sie auf Ihrem Server aus Sicherheitsgründen in der Produktionsumgebung keinen Wildcard-Eintrag (*) für Access-Control-Allow-Origin.

---

Output appears here after Run.

Übertragen von Anmeldeinformationen mit Fetch

Wenn Ihre Cross-Origin-Anfrage Anmeldeinformationen erfordert (z. B. Cookies oder HTTP-Authentifizierung), müssen Sie die Option credentials angeben:

---

async function fetchWithCredentials(url) {
  try {
    const response = await fetch(url, {
      mode: 'cors',
      credentials: 'include'
    });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchWithCredentials('https://api.crossorigin.com/secure-data');

note

Wenn eine CORS-Richtlinie die Antwort blockiert, gibt der Browser eine undurchsichtige Antwort zurück. Sie können den Status oder den Körper nicht lesen, aber das fetch-Promise wird abgelehnt, sodass Sie den Fehler im catch-Block abfangen können.

Preflight-Anfragen handhaben

Bei bestimmten Arten von Cross-Origin-Anfragen sendet der Browser zunächst eine OPTIONS-Anfrage (Preflight-Anfrage) an den Server, um zu prüfen, ob die eigentliche Anfrage sicher gesendet werden kann. Dies gilt für Anfragen, die:

• Methoden verwenden, die nicht GET, HEAD oder POST sind.
• Eigene Header enthalten.
• Den Content-Type-Header mit Werten verwenden, die nicht application/x-www-form-urlencoded, multipart/form-data oder text/plain sind.

Wenn die Preflight-Anfrage fehlschlägt, löst der Browser einen Netzwerkfehler aus, anstatt einen standardmäßigen HTTP-Statuscode zurückzugeben. Das bedeutet, dass der Fehler im catch-Block abgefangen wird und nicht von response.ok verarbeitet wird.

Best Practices für Cross-Origin-Fetch-Anfragen

Sichern Sie Ihre API

Stellen Sie sicher, dass Ihre API sicher ist, indem Sie alle eingehenden Daten validieren und bereinigen. Verwenden Sie HTTPS, um Daten während der Übertragung zu verschlüsseln, und implementieren Sie ordnungsgemäße Authentifizierungs- und Autorisierungsmechanismen.

Verwenden Sie geeignete CORS-Header

Konfigurieren Sie Ihren Server so, dass er die erforderlichen CORS-Header enthält. Vermeiden Sie in der Produktionsumgebung die Verwendung eines Wildcards (*) für Access-Control-Allow-Origin. Geben Sie stattdessen die exakten Ursprünge an, die erlaubt sind.

Fehler elegant behandeln

Implementieren Sie eine robuste Fehlerbehandlung, um aussagekräftiges Feedback für Benutzer bereitzustellen und Fehler zu Debugging-Zwecken zu protokollieren.

Leistung optimieren

Minimieren Sie die Anzahl der Cross-Origin-Anfragen, indem Sie Ressourcen wo möglich zusammenfassen und Caching verwenden, um Ladezeiten zu reduzieren.

Fazit

Die Beherrschung von Cross-Origin-Anfragen mit der Fetch API ist für die moderne Webentwicklung von entscheidender Bedeutung. Durch das Verständnis, wie diese Anfragen konfiguriert und gehandhabt werden, können Sie sicherere, effizientere und zuverlässigere Webanwendungen entwickeln. Befolgen Sie die in diesem Artikel beschriebenen Best Practices, um sicherzustellen, dass Ihre Cross-Origin-Anfragen korrekt und sicher verarbeitet werden.