Der Access-Control-Allow-Origin-Header wird erläutert - anhand eines CORS-Beispiels

Beim Aufrufen einer API wird häufig ein Fehler in Ihrer Konsole angezeigt, der folgendermaßen aussieht:

 Access to fetch at '//somesite.com' from origin '//yoursite.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin 

In diesem Beitrag erfahren Sie, warum dieser Fehler auftritt und wie Sie ihn beheben können.

Was ist der Access-Control-Allow-OriginHeader?

Access-Control-Allow-Originist ein CORS-Header. CORS oder Cross Origin Resource Sharing ist ein Mechanismus für Browser, mit dem eine Site, die am Ursprung A ausgeführt wird, Ressourcen vom Ursprung B anfordern kann.

Origin ist nicht nur der Hostname, sondern eine Kombination aus Port, Hostname und Schema, z. //mysite.example.com:8080/

Hier ist ein Beispiel dafür, wo dies zum Tragen kommt -

  1. Ich habe einen Ursprung A: //mysite.comund ich möchte Ressourcen von Ursprung B: erhalten //yoursite.com.
  2. Um Ihre Sicherheit zu schützen, lässt mich der Browser nicht auf Ressourcen von Ihrer Site.com zugreifen und blockiert meine Anfrage.
  3. Damit Herkunft A auf Ihre Ressourcen zugreifen kann, muss Herkunft B dem Browser mitteilen, dass es für mich in Ordnung ist, Ressourcen von Ihrer Herkunft abzurufen.

Hier ist ein Beispiel aus dem Mozilla Developer Network, das dies sehr gut erklärt:

Mithilfe von CORS ermöglichen Browser den Ursprüngen, Ressourcen untereinander zu teilen.

Es gibt einige Header, die die gemeinsame Nutzung von Ressourcen über verschiedene Ursprünge hinweg ermöglichen, aber der wichtigste ist Access-Control-Allow-Origin. Dies teilt dem Browser mit, welche Ursprünge Anforderungen von diesem Server empfangen dürfen.

Wer muss einstellen Access-Control-Allow-Origin?

Stellen Sie sich folgendes Szenario vor, um zu verstehen, wer diesen Header festlegen muss: Sie durchsuchen eine Website, auf der Songs angezeigt und angehört werden. Die Website versucht böswillig, im Hintergrund eine Verbindung zu Ihrer Bank herzustellen.

Wer kann also letztendlich verhindern, dass diese bösartige Website Ihre Daten von der Bank stiehlt? Die Bank! Daher muss die Bank ihre Ressourcen schützen, indem sie den Access-Control-Allow-OriginHeader als Teil der Antwort festlegt.

Denken Sie daran: Der Ursprung, der für die Bereitstellung von Ressourcen verantwortlich ist, muss diesen Header festlegen.

Verwendung und Übergabe dieses Headers

Hier ist ein Beispiel für Werte, die Sie festlegen können:

  1. Access-Control-Allow-Origin : * : Ermöglicht jeden Ursprung.
  2. Access-Control-Allow-Origin : //mysite.com : Erlaube nur Anfragen von mysite.com.

Sehen Sie es in Aktion

Schauen wir uns ein Beispiel an. Sie können diesen Code auf meinem GitHub-Repo überprüfen.

Wir werden einen Server auf Ursprung A bauen //localhost:8000, der eine Zeichenfolge von Hellos an einen apiEndpunkt sendet . Wir werden mit diesem Endpunkt aufrufen, indem wir einen Client auf Ursprung B erstellen //localhost:3000und dann Fetch verwenden, um die Ressource anzufordern. Wir erwarten, dass die Hellovon Ursprung A übergebene Zeichenfolge in der Browserkonsole von Ursprung B übergeben wird.

Angenommen, wir haben einen Ursprung //localhost:8000, der diese Ressource auf dem /apiEndpunkt bereitstellt. Der Server sendet eine Antwort mit dem Header Access-Control-Allow-Origin.

const express = require("express"); const app = express(); const port = process.env.SERVER_PORT || 8000; // Add Access Control Allow Origin headers app.use((req, res, next) => { res.setHeader("Access-Control-Allow-Origin", "//yoursite.com"); res.header( "Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept" ); next(); }); app.get("/api", (req, res) => { res.json("Hello"); }); app.listen(port, () => console.log(`Listening on port ${port}`)); 

Auf der Clientseite können Sie diesen Endpunkt fetchwie folgt aufrufen :

fetch('//localhost:8000/api') .then(res => res.json()) .then(res => console.log(res)); 

Öffnen Sie nun die Konsole Ihres Browsers, um das Ergebnis anzuzeigen.

Da der Header derzeit so eingestellt ist, dass nur der Zugriff von möglich ist //yoursite.com, blockiert der Browser den Zugriff auf die Ressource und es wird ein Fehler in Ihrer Konsole angezeigt.

Um dies zu beheben, ändern Sie die Überschriften wie folgt:

 res.setHeader("Access-Control-Allow-Origin", "*"); 

Überprüfen Sie die Konsole Ihres Browsers und sehen Sie die Zeichenfolge Hello.

Interessiert an weiteren Tutorials und JSBytes von mir? Melden Sie sich für meinen Newsletter an.