So erstellen Sie eine domänenübergreifende Anforderung in JavaScript mit CORS

Ursprungsübergreifende Ressourcennutzung(oder CORS) kann verwendet werden, um AJAX - Anforderungen an eine andere Domäne zu stellen.Wir werden prüfen, wie CORS auf dem Server in PHP eingerichtet wird, wie die Anforderung in JavaScript ausgeführt wird, und einige Überlegungen.
CORS als Konzept ist breiter als nur AJAX - Anfragen, aber dies ist seine Hauptanwendung.Hier bei Moxio verwenden wir domänenübergreifende Anforderungen für unseren Single Sign - On - Service.Wir erläutern, wie Sie CORS am Beispiel eines Single - Sign - On - Dienstes implementieren.

Single Sign - On - Übersicht Hier sehen Sie ein Flussdiagramm, das unseren Anmeldeprozess beschreibt.
In 1 fordern wir den Login - Status von foo.app.moxio.com an.Wir senden das Sitzungscookie.Die Anwendung überprüft es anhand einer Liste aktiver Sitzungen. In 2 fordern wir den Login - Status von sso.moxio.com an.Wir senden das Sitzungscookie.Die Anwendung überprüft es anhand einer Liste aktiver Sitzungen. In 3 fordern wir ein Authentifizierungs - Token von sso.moxio.com an.Wir senden das Session - Cookie und der Server erstellt ein Authentifizierungstoken für uns, das Token wird gespeichert und zurückgegeben. In 4 führen wir eine Anmeldung mit dem Authentifizierungstoken durch.Dies startet eine Sitzung auf foo.app.moxio.com.Der Server auf foo.app.moxio.com verwendet das Authentifizierungstoken auf sso.moxio.com, um den Benutzer zu verifizieren.Dieser Teil wird nicht angezeigt. In 5 führen wir ein Login mit Benutzername und Passwort auf sso.moxio.com durch.Dies startet eine neue Sitzung auf sso.moxio.com. Wie Sie sehen, senden wir Anfragen an foo.app.moxio.com und sso.moxio.com.Der Benutzer wechselt nie von foo.app.moxio.com weg, sodass die Anfragen an sso.moxio.com domänenübergreifend sind.
Einrichten einer CORS - Richtlinie Standardmäßig dürfen Sie keine AJAX - Anforderungen an eine andere Domäne senden.Ihr Browser wendet die Richtlinie "Same Origin" als Teil des Websicherheitsmodells an.
Damit der Browser eine domänenübergreifende Anforderung von foo.app.moxio.com an sso.moxio.com senden kann, müssen Sie eine CORS - Richtlinie für die Zieldomäne einrichten.Die CORS - Richtlinie wird vom Browser durchgesetzt. Wenn Sie die Zieldomäne nicht steuern können, können Sie keine CORS - Richtlinie festlegen, suchen Sie nach Alternativen zu CORS.
Eine CORS - Richtlinie ist eine Gruppe von HTTP - Antwortheadern.Eine grundlegende CORS - Richtlinie kann folgendermaßen aussehen:

Access - Control - Allow - Origin: https: //foo.app.moxio.com Access-Control-Allow-Credentials:
    true Access-Control-Allow-Methods: POST Access-Control-Allow-Headers: Content-Type 

Diese Richtlinie besagt, dass der Ursprung https: //foo.app.moxio.com eine POST- Anfrage stellen darf, Cookies enthalten sein können und wir den Content-Type- Header senden dürfen.

Die Anfrage in JavaScript Hier erfahren Sie, wie Sie in JavaScript eine Anforderung stellen, die von dieser Richtlinie zugelassen wird.

 
    var http_request;
http_request = new XMLHTTPRequest();
http_request.onreadystatechange = function() { /* .. */ };
http_request.open("POST", "https://sso.moxio.com");
http_request.withCredentials = true;
http_request.setRequestHeader("Content-Type", "application/json");
http_request.send({
    'request': "authentication token"
}); 

Wir senden eine POST - Anforderung, die JSON enthält, und wir setzen unsere Cookies ein.Es erzeugt eine Anfrage mit diesen Kopfzeilen:

 
    Origin: https: //foo.app.moxio.com Access-Control-Request-Method: POST Access-Control-Request-Headers: Content-Type 

Preflight - Anfrage Vor der AJAX - Anfrage führt der Browser eine Preflight - Anfrage aus.Dies ist eine OPTIONS - Anforderung, mit der der Browser die Richtlinie überprüft. Wenn Sie die CORS - Richtlinie auf dem Server implementieren, müssen Sie daher auch die Richtlinie für OPTIONS - Anforderungen senden.
Empfang der Anfrage in PHP Hier ist eine Beispielimplementierung für den Server in PHP:

 
    if (isset($_SERVER["HTTP_ORIGIN"]) === true) {
        $origin = $_SERVER["HTTP_ORIGIN"];
        $allowed_origins = array("http://public.app.moxio.com", "https://foo.app.moxio.com", "https://lorem.app.moxio.com");
        if (in_array($origin, $allowed_origins, true) === true) {
            header('Access-Control-Allow-Origin: '.$origin);
            header('Access-Control-Allow-Credentials: true');
            header('Access-Control-Allow-Methods: POST');
            header('Access-Control-Allow-Headers: Content-Type');
        }
        if ($_SERVER["REQUEST_METHOD"] === "OPTIONS") {
            exit; // OPTIONS request wants only the policy, we can stop here } } 

Dieses Beispiel zeigt einige wichtige Dinge:

http und https haben unterschiedliche Ursprünge. Wir lassen nicht alle Ursprünge zu.Sie können Allow - Origin auf ' * ' setzen, um alle Origins zuzulassen.Dies kann nützlich sein, wenn Sie eine API mit öffentlicher Ausrichtung haben. Wir legen die Liste der zulässigen Herkunft nicht offen.Sie können für Allow - Origin eine durch Kommas getrennte Liste von Domänen festlegen.Dies sind jedoch mehr Informationen, als die Anforderung benötigt. Da CORS in erster Linie ein Sicherheitsmerkmal ist, ist es sinnvoll, es so restriktiv wie möglich zu gestalten. Für die Preflight - Anfrage müssen wir nur die CORS - Richtlinie zurückgeben.Die Anfrage muss nicht vollständig bearbeitet werden. Für die ACA - Header können Sie eine dynamische Whitelist implementieren(wie bei den Domains).Wir machen das nicht, weil wir immer die gleichen Header senden. Alternativen zu CORS Browser - Unterstützung für CORS ist heutzutage gut.In der Vergangenheit mussten Sie möglicherweise ActiveXObject oder XDomainRequest in Internet Explorer verwenden, da dies nur eingeschränkte Funktionen bot.
JSONP kann verwendet werden, um die CORS - Einschränkungen zu umgehen, hat aber auch eigene Einschränkungen.
Ein anderer Weg um CORS herum besteht darin, die Anforderung über den Server in Ihrer Domäne zu senden.Dies ist nicht immer eine schlechte Lösung, insbesondere wenn Sie die Zwischenspeicherung nutzen oder die API anpassen möchten.
Sie können die Überprüfung der CORS - Richtlinien auch in einigen Browsern deaktivieren.Dies kann bei der Entwicklung hilfreich sein.


Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0