Eine Cross-Origin Resource Sharing (CORS)-Anforderung ist, wenn eine browserbasierte Anwendung, wie z. B. eine Zendesk App Framework (ZAF), versucht, einen Cross-Origin-Aufruf durchzuführen, um eine geteilte Ressource von einem externen Webservice abzurufen.

Eine CORS-Anforderung erfordert bestimmte Bedingungen, damit sie funktioniert. Eine Bedingung ist, dass der externe Dienst den HTTP-Header-Access-Control-Allow-Origin in der Antwort zurückgibt. Wenn der externe Dienst diesen Header nicht zurückgibt, stoppt das System die Anforderung und zeigt eine Fehlermeldung an.

Befolgen Sie diese Anweisungen, um häufig auftretende Probleme im Zusammenhang mit der Access-Control-Allow-Origin-Fehlermeldung zu beheben. Beispiel für Fehlermeldungen:

  • Fehler beim Laden Kein Header „Access-Control-Allow-Origin“
  • Cross-Origin-Anfrage blockiert: Die Richtlinie „Gleiche Herkunft“ verhindert das Lesen der Remote -Ressource ... Grund: CORS-Header „Access-Control-Allow-Origin“ fehlt
  • Fehler beim Laden Antwort auf Preflight-Anfrage besteht keine Zugriffskontrollprüfung: Kein Header „Access-Control-Allow-Origin“ in der angeforderten Ressource vorhanden. Origin ... hat daher keinen Zugriff

Dieser Beitrag enthält die folgenden Themen:

  • Fragen zur Fehlerbehebung
  • Lösungsschritte
  • Alternativen zu CORS

Fragen zur Fehlerbehebung

Bevor Sie den Fehler beheben, notieren Sie sich die folgenden Fragen und identifizieren Sie bestimmte Parameter, die Ihnen bei der Lösung des Problems helfen können:

  1. Wie lautet die Start-URL des Aufrufs oder der Ursprung? Wie lautet die URL des externen Service? Diese werden manchmal in der Fehlermeldung beschrieben.
  2. Was rufen Sie ab und wofür verwenden Sie es? Rufen Sie eine PNG-Datei, ein Skript, CSS oder eine Schriftartdatei ab? So erhalten Sie einen Einblick in den Anwendungsfall und warum die externe Ressource wichtig ist.
  3. Welchen Browser verwenden Sie und seine Version? Obwohl die CORS-Spezifikation ein Standard ist, können die von Browsern zurückgegebenen Fehlermeldungen unterschiedlich sein.
  4. Ist für diese externe Ressource eine Authentifizierung erforderlich? Wenn eine Weiterleitung erforderlich ist, wird der Access-Control-Allow-Origin möglicherweise nicht zurückgegeben und der Aufruf schlägt fehl. Greifen Sie im Inkognitomodus oder beim privaten Browsen auf die Ressourcen-URL zu, um zu testen, ob sie unter allgemeinen Umständen erreichbar ist.
  5. Können Sie den HTTP-Methodenaufruf OPTIONS in den Netzwerkeinstellungen des Browsers sehen? Wenn es angepasste Anforderungen gibt, kann der Browser in der CORS-Anforderung einen HTTP-Preflight-Aufruf durchführen, der bestimmte Werte erfordert. Wenn der OPTIONS fehlschlägt, wird der CORS-Fehler angezeigt.
  6. Sehen Sie den HTTP-Statuscode 302 vor dem OPTIONS? Dies deutet auf eine vorübergehende Umleitung hin, die dazu führen kann, dass der OPTIONS fehlschlägt und dann einen CORS-Fehler auslöst.
  7. Generieren Sie eine HAR-Datei. Erhalten Sie einen Schnappschuss des fehlgeschlagenen Anrufs, um das Problem besser zu verstehen und zu beheben.

Lösungsschritte

Hier sind mögliche Lösungen und Workarounds zur Behebung der Fehlermeldung:

  • Wenn Sie der Eigentümer des externen Servers sind, ändern Sie ihn so, dass der Access-Control-Allow-Origin-Header zurückgegeben wird. Wenn der externe Server nicht intern gesteuert wird, stimmen Sie sich mit dem Serverinhaber ab.
  • Wenn die App mit dem Zendesk App Framework geschrieben wird, ist über den client.request()-Aufruf ein Backend-Proxyserver verfügbar. Verwenden Sie in den Einstellungen den Standardwert cors:false, um Anfragen an den Proxyserver zu senden. Da sich der Proxy-Dienst im Backend befindet, muss er den CORS-Spezifikationsstandard nicht einhalten. Dies ist jedoch nicht immer eine Lösung. Eine Einschränkung besteht darin, dass der Proxy-Dienst den Abruf binärer Informationen von externen Diensten nicht Support bietet.

Manchmal gibt es keine Lösung. Es gibt externe Ressourcen, die nicht für eine browserbasierte Web-App bestimmt sind.

Alternativen zu CORS

Um CORS-bezogene Fehler in Zukunft zu vermeiden, implementieren Sie diese Alternativen:

  • Wenn Sie eine Zendesk App Framework verwenden, verwenden Sie den Proxyserver. Verwenden Sie anstelle von Direct fetch() oder AJAX den client.request()-Anruf, der Anfragen über Zendesk weiterleitet.
  • Mit dem Web Widget SDK können Sie Live-Chat, Messaging, Ticketerstellung, Talk und Help Center in Ihre Web-App einbetten. Das SDK verarbeitet Authentifizierung und CORS automatisch.
  • Führen Sie stattdessen API-Aufrufe von Ihrem Backend-Server aus durch. Eine CORS-Anforderung kann einen Fehler verursachen, wenn sie die Zendesk-API direkt von einem Browser aus aufruft. Für Server-zu-Server-Anfragen gelten keine CORS-Beschränkungen, für browserbasierte Anfragen hingegen schon.
  • Betten Sie anstelle einer CORS-Anforderung die externe Ressource ein, um ursprungsübergreifende Anrufe zu vermeiden. Diese Lösung funktioniert möglicherweise nicht, wenn Sie die URL der externen Ressource nicht haben, sie zu groß ist, um sie als lokale Ressource zu verwenden, die Daten zu oft geändert werden, um sie als lokale statische Ressource herunterzuladen, oder es nicht möglich ist, die externe Ressource einzubetten.

Hinweis zur Übersetzung: Dieser Beitrag wurde mit automatischer Übersetzungssoftware übersetzt, um dem Leser ein grundlegendes Verständnis des Inhalts zu vermitteln. Trotz angemessener Bemühungen, eine akkurate Übersetzung bereitzustellen, kann Zendesk keine Garantie für die Genauigkeit übernehmen.

Sollten in Bezug auf die Genauigkeit der Informationen im übersetzten Beitrag Fragen auftreten, beziehen Sie sich bitte auf die englische Version des Beitrags, die als offizielle Version gilt.

Powered by Zendesk