Cross-Origin Resource Sharing (CORS)

Dieser Standard für Cross-Origin-Sharing kann Cross-Origin HTTP-Anfragen für folgende Fälle ermöglichen:

• Aufrufe von fetch() oder XMLHttpRequest, wie oben beschrieben.
• Web-Fonts (für die Nutzung von Schriftarten über Domänen hinweg in @font-face innerhalb von CSS), wie in den Anforderungen zum Abrufen von Schriftarten beschrieben, sodass Server TrueType-Schriftarten bereitstellen können, die nur cross-origin geladen werden und von Websites verwendet werden dürfen, die dazu berechtigt sind.
• WebGL-Texturen.
• Bilder/Video-Frames, die auf einen Canvas mit drawImage() gezeichnet werden.
• CSS-Formen aus Bildern.

Dies ist ein allgemeiner Artikel über Cross-Origin Resource Sharing und umfasst eine Diskussion über die notwendigen HTTP-Header.

Der Cross-Origin Resource Sharing-Standard funktioniert durch das Hinzufügen neuer HTTP-Header, die es Servern ermöglichen, anzugeben, welche Ursprünge berechtigt sind, Informationen von einem Webbrowser zu lesen. Darüber hinaus schreibt die Spezifikation für HTTP-Anfragemethoden, die Nebenwirkungen auf Serverdaten verursachen können (insbesondere HTTP-Methoden, die keine GET oder POST mit bestimmten MIME-Typen sind), vor, dass Browser die Anfrage "vorab" prüfen, wobei die unterstützten Methoden vom Server mit der HTTP-Methode OPTIONS abgefragt und dann, bei "Genehmigung" durch den Server, die tatsächliche Anfrage gesendet werden. Server können auch Clients darüber informieren, ob "Zugangsdaten" (wie Cookies und HTTP-Authentifizierung) mit Anfragen gesendet werden sollten.

CORS-Fehler führen zu Fehlern, aber aus Sicherheitsgründen sind Details zu dem Fehler nicht für JavaScript verfügbar. Der gesamte Code weiß nur, dass ein Fehler aufgetreten ist. Die einzige Möglichkeit, genau festzustellen, was schiefgelaufen ist, besteht darin, die Konsole des Browsers auf Details zu überprüfen.

Nachfolgende Abschnitte diskutieren Szenarien und geben eine Aufschlüsselung der verwendeten HTTP-Header.

Wir präsentieren drei Szenarien, die demonstrieren, wie Cross-Origin Resource Sharing funktioniert. Alle diese Beispiele verwenden fetch(), das cross-origin Anfragen in jedem unterstützenden Browser ausführen kann.

Einige Anfragen lösen keine CORS-Vorab-Anfrage aus. Diese werden im veralteten CORS-Standard als einfache Anfragen bezeichnet, obwohl der Fetch-Standard (der jetzt CORS definiert) diesen Begriff nicht verwendet.

Die Motivation dahinter ist, dass das <form>-Element aus HTML 4.0 (das vor cross-site fetch() und XMLHttpRequest existiert) einfache Anfragen an jeden Ursprung senden kann, sodass jeder, der einen Server schreibt, bereits Schutzmaßnahmen gegen Cross-Site-Request-Forgery (CSRF) getroffen haben muss. Unter dieser Annahme muss der Server nicht zustimmen (indem er auf eine Vorab-Anfrage antwortet), um jede Anfrage zu akzeptieren, die wie eine Formularübermittlung aussieht, da die Bedrohung durch CSRF nicht schlimmer ist als die durch Formularübermittlung. Allerdings muss der Server dennoch mit Access-Control-Allow-Origin zustimmen, um die Antwort mit dem Skript zu teilen.

Eine einfache Anfrage ist eine, die alle folgenden Bedingungen erfüllt:

• Eine der erlaubten Methoden:

  • GET
  • HEAD
  • POST

• Abgesehen von den automatisch vom Benutzeragenten gesetzten Headern (z. B. Connection, User-Agent oder den verbotenen Anfrage-Headern), sind nur diejenigen Header gestattet, die manuell gesetzt werden, die CORS-safe-gelistete Anfrage-Header sind:

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type (bitte beachten Sie die zusätzlichen Anforderungen unten)
  • Range (nur mit einem einzelnen Range-Header-Wert; z. B. bytes=256- oder bytes=127-255)

• Die einzigen erlaubten Typ/Subtyp-Kombinationen für den Medientyp, der im Content-Type-Header angegeben wird, sind:

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

• Wenn die Anfrage mit einem XMLHttpRequest-Objekt gemacht wird, sind keine Event-Listener auf dem Objekt registriert, das von der XMLHttpRequest.upload-Eigenschaft in der Anfrage verwendet wird; das heißt, es hat kein Code xhr.upload.addEventListener() aufgerufen, um einen Event-Listener hinzuzufügen, um den Upload zu überwachen.

• Kein ReadableStream-Objekt wird in der Anfrage verwendet.

Zum Beispiel, nehmen wir an, Webinhalte auf https://foo.example wünschen, JSON-Inhalte von der Domäne https://bar.other abzurufen. Code dieser Art könnte in JavaScript auf foo.example eingesetzt werden:

const fetchPromise = fetch("https://bar.other");

fetchPromise
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

Diese Operation führt einen einfachen Austausch zwischen dem Client und dem Server durch und verwendet CORS-Header, um die Berechtigungen zu verwalten:

Sehen wir uns an, was der Browser in diesem Fall an den Server senden wird:

GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example

Der bemerkenswerte Anforderungsheader ist Origin, der zeigt, dass der Aufruf von https://foo.example kommt.

Sehen wir uns nun an, wie der Server antwortet:

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

[…XML Data…]

Als Antwort gibt der Server einen Access-Control-Allow-Origin-Header mit Access-Control-Allow-Origin: * zurück, was bedeutet, dass auf die Ressource von jedem Ursprung zugegriffen werden kann.

Access-Control-Allow-Origin: *

Dieses Muster der Origin- und Access-Control-Allow-Origin-Header ist die einfachste Nutzung des Zugriffskontrollprotokolls. Wenn die Ressourcenbesitzer bei https://bar.other den Zugriff auf die Ressource auf Anfragen nur von https://foo.example beschränken wollten (d.h. keine andere Domäne als https://foo.example kann auf die Ressource in einer Cross-Origin-Weise zugreifen), würden sie Folgendes senden:

Access-Control-Allow-Origin: https://foo.example

Im Gegensatz zu einfachen Anfragen sendet der Browser bei "vorab geprüften" Anfragen zuerst eine HTTP-Anfrage mit der Methode OPTIONS an die Ressource auf dem anderen Ursprung, um festzustellen, ob die tatsächliche Anfrage sicher gesendet werden kann. Solche Cross-Origin-Anfragen werden vorab geprüft, da sie Auswirkungen auf Benutzerdaten haben können.

Das Folgende ist ein Beispiel für eine Anfrage, die vorab geprüft wird:

const fetchPromise = fetch("https://bar.other/doc", {
  method: "POST",
  mode: "cors",
  headers: {
    "Content-Type": "text/xml",
    "X-PINGOTHER": "pingpong",
  },
  body: "<person><name>Arun</name></person>",
});

fetchPromise.then((response) => {
  console.log(response.status);
});

Das obige Beispiel erstellt einen XML-Körper, der mit der POST-Anfrage gesendet wird. Außerdem wird ein nicht standardmäßiger HTTP-X-PINGOTHER-Anforderungsheader gesetzt. Solche Header sind nicht Teil von HTTP/1.1, aber im Allgemeinen nützlich für Webanwendungen. Da die Anfrage einen Content-Type von text/xml verwendet und da ein benutzerdefinierter Header gesetzt wird, wird diese Anfrage vorab geprüft.

Sehen wir uns den gesamten Austausch zwischen Client und Server an. Der erste Austausch ist die Vorab-Anfrage/Antwort:

OPTIONS /doc HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type,x-pingother

HTTP/1.1 204 No Content
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2
Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive

Der obige Block stellt die Vorab-Anfrage mit der Methode OPTIONS dar. Der Browser bestimmt, dass er dies auf der Grundlage der Anforderungsparameter, die im obigen JavaScript-Code-Snippet verwendet wurden, senden muss, damit der Server antworten kann, ob es akzeptabel ist, die Anfrage mit den tatsächlichen Anforderungsparametern zu senden. OPTIONS ist eine HTTP/1.1-Methode, die verwendet wird, um weitere Informationen von Servern zu erhalten und eine sichere Methode ist, was bedeutet, dass sie nicht verwendet werden kann, um die Ressource zu ändern. Beachten Sie, dass zusammen mit der OPTIONS-Anfrage zwei weitere Anforderungsheader gesendet werden:

Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type,x-pingother

Der Access-Control-Request-Method-Header benachrichtigt den Server als Teil einer Vorab-Anfrage, dass die tatsächliche Anfrage mit einer POST-Anfragemethode gesendet wird. Der Access-Control-Request-Headers-Header benachrichtigt den Server, dass die tatsächliche Anfrage mit X-PINGOTHER und benutzerdefinierten Content-Type-Headern gesendet wird. Jetzt hat der Server die Möglichkeit zu bestimmen, ob er eine Anfrage unter diesen Bedingungen akzeptieren kann.

Der zweite Block oben ist die Antwort, die der Server zurückgibt und anzeigen, dass die Anfragemethode (POST) und die Anforderungsheader (X-PINGOTHER) akzeptabel sind. Schauen wir uns die folgenden Zeilen genauer an:

Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

Der Server antwortet mit Access-Control-Allow-Origin: https://foo.example und beschränkt den Zugriff nur auf die verlangende Ursprung-Domäne. Es antwortet auch mit Access-Control-Allow-Methods, was sagt, dass POST und GET gültige Methoden sind, um die betreffende Ressource abzufragen (dieser Header ist dem Allow-Antwort-Header ähnlich, wird jedoch streng im Kontext der Zugriffskontrolle verwendet).

Der Server sendet auch Access-Control-Allow-Headers mit einem Wert von X-PINGOTHER, Content-Type und bestätigt, dass dies erlaubte Header sind, die in der tatsächlichen Anfrage verwendet werden dürfen. Wie Access-Control-Allow-Methods ist Access-Control-Allow-Headers eine durch Kommata getrennte Liste akzeptabler Header.

Schließlich gibt Access-Control-Max-Age den Wert in Sekunden an, wie lange die Antwort auf die Vorab-Anfrage zwischengespeichert werden kann, ohne eine weitere Vorab-Anfrage zu senden. Der Standardwert beträgt 5 Sekunden. Im vorliegenden Fall beträgt das maximale Alter 86400 Sekunden (= 24 Stunden). Beachten Sie, dass jeder Browser einen maximalen internen Wert hat, der Vorrang hat, wenn das Access-Control-Max-Age diesen überschreitet.

Sobald die Vorab-Anfrage abgeschlossen ist, wird die tatsächliche Anfrage gesendet:

POST /doc HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
X-PINGOTHER: pingpong
Content-Type: text/xml; charset=UTF-8
Referer: https://foo.example/examples/preflightInvocation.html
Content-Length: 55
Origin: https://foo.example
Pragma: no-cache
Cache-Control: no-cache

<person><name>Arun</name></person>

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:40 GMT
Server: Apache/2
Access-Control-Allow-Origin: https://foo.example
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 235
Keep-Alive: timeout=2, max=99
Connection: Keep-Alive
Content-Type: text/plain

[Some XML content]

Vorab-Anfragen und Umleitungen

Nicht alle Browser unterstützen derzeit das Folgen von Umleitungen nach einer vorab geprüften Anfrage. Wenn eine Umleitung nach einer solchen Anfrage auftritt, berichten einige Browser derzeit möglicherweise eine Fehlermeldung wie die folgende:

Die Anfrage wurde an https://example.com/foo umgeleitet, was für cross-origin Anfragen, die eine Vorabprüfung erfordern, nicht erlaubt ist. Anfrage erfordert Vorabprüfung, was nicht erlaubt ist, um cross-origin Umleitungen zu folgen.

Das CORS-Protokoll erforderte ursprünglich dieses Verhalten, wurde aber nachträglich geändert, um es nicht mehr zu verlangen. Allerdings haben nicht alle Browser die Änderung umgesetzt, und daher zeigen sie immer noch das ursprünglich geforderte Verhalten.

Bis Browser mit der Spezifikation aufholen, können Sie möglicherweise diese Einschränkung umgehen, indem Sie eines oder beide der folgenden tun:

• Ändern Sie das Server-Verhalten, um die Vorabprüfung und/oder die Umleitung zu vermeiden
• Ändern Sie die Anfrage, sodass sie eine einfache Anfrage ist, die keine Vorabprüfung auslöst

Wenn das nicht möglich ist, dann ist eine andere Möglichkeit:

1. Machen Sie eine einfache Anfrage (unter Verwendung von Response.url für die Fetch-API oder XMLHttpRequest.responseURL), um zu bestimmen, an welcher URL die tatsächliche vorab geprüfte Anfrage enden würde.
2. Machen Sie eine weitere Anfrage (die eigentliche Anfrage) mit der URL, die Sie im ersten Schritt von Response.url oder XMLHttpRequest.responseURL erhalten haben.

Wenn die Anfrage jedoch eine Vorabprüfung wegen des Vorhandenseins des Authorization-Headers in der Anfrage auslöst, können Sie die Einschränkung mit den oben genannten Schritten nicht umgehen. Und Sie können sie überhaupt nicht umgehen, es sei denn, Sie haben die Kontrolle über den Server, an den die Anfrage gerichtet ist.

Die interessanteste Fähigkeit, die sowohl von fetch() als auch von XMLHttpRequest und CORS bereitgestellt wird, ist die Möglichkeit, "credentialed" Anfragen zu machen, die sich der HTTP-Cookies und HTTP-Authentifizierungsinformationen bewusst sind. De默认情况下，跨域 fetch() 或 XMLHttpRequest 请求，浏览器不发送凭证。

Um eine fetch()-Anfrage zu bitten, Zugangsdaten einzuschließen, setzen Sie die credentials Option auf "include".

Um eine XMLHttpRequest-Anfrage zu bitten, Zugangsdaten einzuschließen, setzen Sie die XMLHttpRequest.withCredentials Eigenschaft auf true.

In diesem Beispiel macht ein Inhalt, der ursprünglich von https://foo.example geladen wurde, eine GET-Anfrage zu einer Ressource auf https://bar.other, die Cookies setzt. Inhalte auf foo.example könnten JavaScript mit diesem Code enthalten:

const url = "https://bar.other/resources/credentialed-content/";

const request = new Request(url, { credentials: "include" });

const fetchPromise = fetch(request);
fetchPromise.then((response) => console.log(response));

Dieser Code erstellt ein Request-Objekt und setzt die credentials-Option im Konstruktor auf "include", dann wird diese Anfrage an fetch() übergeben. Da dies eine einfache GET-Anfrage ist, wird sie nicht vorab geprüft, aber der Browser verwirft jede Antwort, die nicht den Access-Control-Allow-Credentials-Header mit dem Wert true hat, und macht die Antwort nicht für die aufrufenden Webinhalte verfügbar.

Hier ist ein Beispielaustausch zwischen Client und Server:

GET /resources/credentialed-content/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Referer: https://foo.example/examples/credential.html
Origin: https://foo.example
Cookie: pageAccess=2

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:34:52 GMT
Server: Apache/2
Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Credentials: true
Cache-Control: no-cache
Pragma: no-cache
Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 106
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

[text/plain content]

Obwohl der Cookie-Header der Anfrage das Cookie enthält, das für den Inhalt auf https://bar.other bestimmt ist, würde die Antwort ignoriert und nicht für die Webinhalte verfügbar gemacht, wenn bar.other nicht mit einem Access-Control-Allow-Credentials mit dem Wert true antwortet, wie in diesem Beispiel dargestellt.

Vorabprüfungsanfragen und Zugangsdaten

CORS-Vorabprüfungsanfragen dürfen niemals Zugangsdaten enthalten. Die Antwort auf eine Vorabprüfungsanfrage muss Access-Control-Allow-Credentials: true angeben, um anzuzeigen, dass die tatsächliche Anfrage mit Zugangsdaten gestellt werden kann.

Bekredentialisierte Anfragen und Platzhalter

Bei der Antwort auf eine bekredentialisierte Anfrage:

• Der Server darf nicht das *-Wildcard für den Access-Control-Allow-Origin-Antwort-Header-Wert spezifizieren, sondern muss stattdessen einen expliziten Ursprung angeben; zum Beispiel: Access-Control-Allow-Origin: https://example.com
• Der Server darf nicht das *-Wildcard für den Access-Control-Allow-Headers-Antwort-Header-Wert spezifizieren, sondern muss stattdessen eine explizite Liste von Header-Namen angeben; zum Beispiel, Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
• Der Server darf nicht das *-Wildcard für den Access-Control-Allow-Methods-Antwort-Header-Wert spezifizieren, sondern muss stattdessen eine explizite Liste von Methodenamen angeben; zum Beispiel, Access-Control-Allow-Methods: POST, GET
• Der Server darf nicht das *-Wildcard für den Access-Control-Expose-Headers-Antwort-Header-Wert spezifizieren, sondern muss stattdessen eine explizite Liste von Header-Namen angeben; zum Beispiel, Access-Control-Expose-Headers: Content-Encoding, Kuma-Revision

Wenn eine Anfrage ein Zugangsdaten enthält (meistens ein Cookie-Header) und die Antwort einen Access-Control-Allow-Origin: *-Header (d.h. mit dem Wildcard) enthält, blockiert der Browser den Zugriff auf die Antwort und meldet einen CORS-Fehler in der Entwicklerkonsole.

Aber wenn eine Anfrage eine Berechtigung (wie den Cookie-Header) enthält und die Antwort einen tatsächlichen Ursprung anstelle des Platzhalters (wie zum Beispiel Access-Control-Allow-Origin: https://example.com) enthält, dann erlaubt der Browser den Zugriff auf die Antwort vom angegebenen Ursprung.

Beachten Sie auch, dass jeder Set-Cookie-Antwort-Header in einer Antwort kein Cookie setzen würde, wenn der Access-Control-Allow-Origin-Wert in dieser Antwort das *-Wildcard anstelle eines tatsächlichen Ursprungs ist.

Drittanbieter-Cookies

Beachten Sie, dass Cookies, die in CORS-Antworten gesetzt werden, den normalen Drittanbieter-Cookie-Richtlinien unterliegen. Im obigen Beispiel wird die Seite von foo.example geladen, aber der Set-Cookie-Header in der Antwort wird von bar.other gesendet, und würde daher nicht gespeichert, wenn der Browser des Benutzers so konfiguriert ist, dass alle Drittanbieter-Cookies abgelehnt werden.

Cookies in der Anfrage können auch durch normale Drittanbieter-Cookie-Richtlinien unterdrückt werden. Die durchgesetzte Cookie-Richtlinie kann daher die im vorliegenden Kapitel beschriebene Fähigkeit hinfällig machen und verhindern, dass Sie überhaupt bekredentialisierte Anfragen machen können.

Cookie-Richtlinien bezüglich des SameSite-Attributs würden Anwendung finden.

Dieser Abschnitt listet die HTTP-Antwort-Header auf, die Server für Zugriffssteuerungsanfragen gemäß der Cross-Origin Resource Sharing-Spezifikation zurückgeben. Der vorhergehende Abschnitt gibt eine Übersicht über deren Anwendung.

Eine zurückgegebene Ressource kann einen Access-Control-Allow-Origin-Header mit folgendem Syntax haben:

Access-Control-Allow-Origin: <origin> | *

Access-Control-Allow-Origin gibt entweder einen einzelnen Ursprung an, der dem Browser mitteilt, dass dieser Ursprung auf die Ressource zugreifen darf, oder alternativ — für Anfragen ohne Zugangsdaten — das *-Wildcard, das dem Browser erlaubt, jedem Ursprung den Zugriff auf die Ressource zu gestatten.

Zum Beispiel, um Code vom Ursprung https://mozilla.org zu erlauben, auf die Ressource zuzugreifen, können Sie folgendes angeben:

Access-Control-Allow-Origin: https://mozilla.org
Vary: Origin

Wenn der Server einen einzelnen Ursprung angibt (der möglicherweise je nach erlaubter Liste dynamisch je nach anfragendem Ursprung ändert), anstelle des *-Wildcards, sollte der Server auch Origin im Vary-Antwort-Header einschließen, um den Clients zu signalisieren, dass sich Serverantworten basierend auf dem Wert des Origin-Anfrage-Headers unterscheiden.

Der Access-Control-Expose-Headers-Header fügt die angegebenen Header der erlaubten Liste hinzu, die JavaScript (wie Response.headers) in Browsern lesen darf.

Access-Control-Expose-Headers: <header-name>[, <header-name>]*

Zum Beispiel würde folgender Eintrag die Header X-My-Custom-Header und X-Another-Custom-Header für den Browser zugänglich machen:

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

Der Access-Control-Max-Age-Header gibt an, wie lange die Ergebnisse einer Vorab-Anfrage zwischengespeichert werden können. Ein Beispiel für eine Vorab-Anfrage finden Sie in den obigen Beispielen.

Access-Control-Max-Age: <delta-seconds>

Der delta-seconds-Parameter gibt die Anzahl der Sekunden an, die die Ergebnisse zwischengespeichert werden können.

Der Access-Control-Allow-Credentials-Header gibt an, ob die Antwort auf die Anfrage offengelegt werden kann, wenn das credentials-Flag wahr ist. Wenn er als Teil einer Antwort auf eine Vorab-Anfrage verwendet wird, zeigt dies an, ob die tatsächliche Anfrage mit Zugangsdaten gestellt werden kann. Beachten Sie, dass einfache GET-Anfragen nicht vorab geprüft werden. Wenn eine Anfrage mit Zugangsdaten gestellt wird und dieser Header nicht mit der Ressource zurückgegeben wird, wird die Antwort vom Browser ignoriert und nicht an die Webinhalte zurückgegeben.

Access-Control-Allow-Credentials: true

Anfragen mit Zugangsdaten werden oben besprochen.

Der Access-Control-Allow-Methods-Header gibt die Methode oder Methoden an, die beim Zugreifen auf die Ressource erlaubt sind. Dieser wird als Antwort auf eine Vorab-Anfrage verwendet. Die Bedingungen, unter denen eine Anfrage vorab geprüft wird, werden oben besprochen.

Access-Control-Allow-Methods: <method>[, <method>]*

Ein Beispiel für eine Vorab-Anfrage ist oben gegeben, einschließlich eines Beispiels, das diesen Header an den Browser sendet.

Der Access-Control-Allow-Headers-Header wird als Antwort auf eine Vorab-Anfrage verwendet, um anzuzeigen, welche HTTP-Header bei den tatsächlichen Anforderungen verwendet werden dürfen. Dieser Header ist die serverseitige Antwort auf den Access-Control-Request-Headers-Header des Browsers.

Access-Control-Allow-Headers: <header-name>[, <header-name>]*

Dieser Abschnitt listet die Header auf, die Clients beim Senden von HTTP-Anfragen verwenden können, um das Cross-Origin-Sharing-Feature zu nutzen. Beachten Sie, dass diese Header für Sie gesetzt werden, wenn Sie Aufrufe an Server machen. Entwickler, die Cross-Origin-Anfragen machen, müssen keine Cross-Origin-Sharing-Anfrage-Header programmgesteuert setzen.

Der Origin-Header gibt den Ursprung der Cross-Origin-Zugriffsanfrage oder Vorab-Anfrage an.

Origin: <origin>

Der Ursprung ist eine URL, die den Server angibt, von dem die Anfrage initiiert wird. Es enthält keine Pfadinformationen, sondern nur den Servernamen.

Beachten Sie, dass in jeder Zugriffskontrollanfrage der Origin-Header immer gesendet wird.

Der Access-Control-Request-Method wird bei der Ausgabe einer Vorab-Anfrage verwendet, um dem Server mitzuteilen, welche HTTP-Methode bei der tatsächlichen Anfrage verwendet wird.

Access-Control-Request-Method: <method>

Beispiele für diese Verwendung finden Sie oben.

Der Access-Control-Request-Headers-Header wird bei der Ausgabe einer Vorab-Anfrage verwendet, um dem Server mitzuteilen, welche HTTP-Header bei der tatsächlichen Anfrage verwendet werden (zum Beispiel, indem diese als headers-Option übergeben werden). Dieser browserseitige Header wird durch den komplementären serverseitigen Header von Access-Control-Allow-Headers beantwortet.

Access-Control-Request-Headers: <field-name>[,<field-name>]*

Beispiele für diese Verwendung finden Sie oben.

• CORS-Fehler
• Enable CORS: Ich möchte CORS-Unterstützung zu meinem Server hinzufügen
• Fetch API
• XMLHttpRequest
• Will it CORS? - ein interaktiver CORS-Erklärer & Generator
• Wie man den Chrome-Browser ohne CORS ausführt
• Using CORS with All (Modern) Browsers
• Stack Overflow-Antwort mit "Anleitungs"-Informationen zur Bewältigung häufiger Probleme:
  • Wie man die CORS-Vorabprüfung vermeidet
  • Wie man einen CORS-Proxy verwendet, um das "Kein Access-Control-Allow-Origin-Header" zu umgehen
  • Wie man "Access-Control-Allow-Origin-Header darf nicht das Wildcard sein" behebt