Eine Cross-Origin-Ressource Sharing (CORS)-Anforderung tritt auf, wenn eine browserbasierte Anwendung einen Cross-Origin-Aufruf durchführt. Eine Zendesk App Framework (ZAF) ruft beispielsweise eine gemeinsam genutzte Ressource von einem externen Webservice ab.

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

In diesem Leitfaden werden häufig auftretende Probleme im Zusammenhang mit der Access-Control-Allow-Origin-Fehlermeldung behoben. Im Folgenden finden Sie Beispiel-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 beheben
  • Lösungsschritte
  • Alternativen zu CORS

Fragen beheben

Bevor Sie den Fehler beheben, notieren Sie sich die folgenden Fragen und identifizieren Sie bestimmte Parameter, die Ihnen helfen können, das Problem zu beheben:

  1. Wie lautet die Ursprungs-URL des Anrufs? Wie lautet die URL des externen Dienstes? In der Fehlermeldung sind diese URLs manchmal angegeben.
  2. Was rufen Sie ab und wofür verwenden Sie es? Rufen Sie eine PNG-Datei, ein Skript, CSS oder eine Schriftdatei ab? Auf diese Weise können Sie den Anwendungsfall und die Bedeutung der externen Ressource besser verstehen.
  3. Welchen Browser und welche Version verwenden Sie? Trotz des CORS-Spezifikationsstandards geben unterschiedliche Browser unterschiedliche Fehlermeldungen zurück.
  4. Ist für diese externe Ressource eine Authentifizierung erforderlich? Bei einer Weiterleitung gibt der Server den Access-Control-Allow-Origin möglicherweise nicht zurück und der Aufruf schlägt fehl. Rufen Sie die Ressourcen-URL im Inkognito-Modus oder in einem privaten Browserfenster auf, um zu testen, ob Sie unter allgemeinen Umständen darauf zugreifen können.
  5. Können Sie die OPTIONS HTTP-Methode in den Netzwerkeinstellungen des Browsers sehen? Bei angepassten Anfragen führt der Browser in der CORS-Anfrage einen HTTP-Preflight-Aufruf durch. Dieser Preflight-Aufruf erfordert bestimmte Werte. Wenn der OPTIONS fehlschlägt, wird der CORS-Fehler angezeigt.
  6. Sehen Sie den HTTP-Statuscode 302 vor dem OPTIONS? Dieser Code weist auf eine vorübergehende Weiterleitung hin, die dazu führen kann, dass der OPTIONS fehlschlägt und ein CORS-Fehler ausgelöst wird.
  7. Generieren Sie eine HTTP-Archivdatei. Erhalten Sie einen Schnappschuss des fehlgeschlagenen Anrufs, um das Problem zu verstehen und zu beheben.

Lösungsschritte

Verwenden Sie diese Lösungen und Workarounds, um die Fehlermeldung zu beheben:

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

Manchmal können Sie dieses Problem nicht lösen. Einige externe Ressourcen Support den geteilten Zugriff über eine browserbasierte Web-App nicht.

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 direkten fetch() oder asynchronen JavaScript- und XML-Aufrufen (AJAX) den client.request()-Aufruf. Dieser Anruf leitet Anfragen über Zendesk weiter.
  • Mit dem Web Widget SDK können Sie Live-Chat, Messaging, Ticketverwaltung, Voice (vormals 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 fehlschlagen, wenn Sie die Zendesk-API direkt von einem Browser aus aufrufen. Server-zu-Server-Anfragen unterliegen keinen CORS-Beschränkungen, 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 schlägt auch fehl, wenn die Ressource zu groß ist, um sie lokal zu speichern, oder wenn sich die Daten zu oft ändern. Wenn Sie die externe Ressource nicht einbetten können, können Sie diese Lösung nicht verwenden.

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