[MUSIK]
Nachdem wir einige Details über cors in der vorherigen Vorlesung verstanden haben,
werden wir in dieser Übung das cors Node Modul verwenden und unseren Express-Server konfigurieren.
Damit der Server mit den entsprechenden kors-bezogenen
Headern auf die Anforderung reagiert, die vom Standort des Clients eingeht.
Um zu beginnen, wie Sie es erwarten würden, installieren wir zuerst das cors Node Module. Geben
Sie an der Eingabeaufforderung npm install ein.
Stellen Sie sicher, dass Sie sich im ConFusion Server-Ordner befinden, und dann cors — speichern.
Und dann installieren Sie das cors Modul.
Und wie Sie sehen können, verwende ich in diesem Kurs cors @2 .8.4.
Sobald Sie das cors Modul installiert haben,
gehen wir zu unserem Editor und konfigurieren Sie dann unseren Express-Server.
Wir gehen zu unserem Redakteur.
Jetzt im Route-Ordner, jetzt, wo ich in erster Linie
das cors-Modul anwenden würde, weil dort alle verschiedenen Routen gewartet werden.
Also im Routenordner werde ich eine neue Datei namens cors.js hinzufügen.
Und dann werden wir in dieser Datei das cors Modul konfigurieren.
Jetzt ist dies meine Art, alle Informationen im Zusammenhang mit
cors in einem separaten dateibasierten Knotenmodul hier zu platzieren.
Lassen Sie mich an der Eingabeaufforderung const express =
require ('express') versuchen.
Und lasst uns
das Cors Modul in.
Const app = express (); und
dann sagen wir eine Whitelist eines Arrays von Strings.
Die Whitelist enthält alle Ursprünge
, die dieser Server akzeptiert.
Jetzt werde ich ein paar von ihnen hier einschließen,
localhost: 3000 und
dann, Lokaler Host 3443.
Und wenn Sie mehr Ursprünge zu Ihrer Whitelist hinzufügen möchten, können Sie sie einfach
zu Ihrer Whitelist hinzufügen, da ich explizit versuche, mein cors-Modul zu konfigurieren.
Also hier werde ich hier
eine A-Funktion deklarieren,
wobei die Anfrage und der Rückruf hier definiert werden.
Und in diesem werde ich herausfinden, dass Cors Optionen hier.
Also werde ich anfangen, indem ich corsOptions,
var corsOptions sage; und dann werde ich
sagen, if (whitelist.indexOf (req.header ('Origin'-
))).
So können Sie sehen, dass wir hier im Code angeben,
sagen wir req.header.
Also, wenn der eingehende Request-Header einen Ursprungs-Feed enthält,
dann werden wir diese Whitelist überprüfen.
Suchen Sie nach diesem besonderen Ursprung, ist es in dieser Whitelist vorhanden?
Deshalb sagen wir Whitelist.indexOf.
Dies ist also eine Array-Operation, die hier durchgeführt wird.
Und wir werden sagen, im Ursprung ist nicht gleich -1.
Wie Sie wissen, wird der Index der Operation den Index größer oder
gleich Null zurückgeben, wenn dies in diesem Array vorhanden ist.
Es wird -1 zurückgeben, wenn dies in diesem Array nicht vorhanden ist.
Also eine sehr schnelle Möglichkeit zu überprüfen, ob die eingehenden
Anfragen in der Whitelist Ursprung.
In diesem Fall sagen wir
CorsOptions, CorsOptions.
CorsOptions = und hier
werde ich {origin: true} angeben,
indem ich also {origin: true} sage, was bedeutet, dass der ursprüngliche
Ursprung in der eingehenden Anfrage in der Whitelist ist ist.
Also werde ich zulassen, dass es akzeptiert wird.
Wenn ich also den Ursprung hier gleich true setze,
antwortet mein cors-Modul zurück und sagt, dass die Zugriffssteuerung Ursprung zulassen, und dann diesen Ursprung in die
Header mit dem Zugriffskontrollschlüssel zulassen Ursprungsschlüssel dort einschließt.
Auf diese Weise wird meine Client-Seite informiert und sagt, dass es in Ordnung ist, dass
der Server diese Anfrage für diesen bestimmten Ursprung akzeptiert.
Andernfalls, wenn das nicht der Fall ist, also
wenn der req.header ('Ursprung') nicht in
der Whitelist ist, dann werden Sie CorsOptions sehen.
{ Herkunft: false}.
Wenn Sie also Ursprung auf false setzen, dann
wird der Zugriffskontroller-Alloworigin von meiner Server-Site nicht zurückgegeben.
Und dann, wenn wir das getan haben,
dann sagen wir Rückruf (null, CorsOptions);.
Das war's. Also, indem wir diese Funktion hier aufrufen,
CorsoPtionsDelegate hier, werden wir überprüfen, ob die eingehende
Anfrage zu einem der Whitelist-Ursprünge gehört.
Wenn dies der Fall ist, antworten Sie mit der Zugriffssteuerung
Alloworigin mit dem Ursprung der dort gesetzten Anforderung zurück.
Andernfalls wird die Zugriffssteuerung Alloworigin nicht enthalten, wenn sie antwortet.
Nun, von dieser Funktion, werden wir cors als cors hier exportieren.
Nun, wenn Sie das cors Modul konfigurieren, indem Sie einfach cors
ohne Optionen sagen, dann bedeutet das, dass dies
mit der Zugriffskontrolle Alloworigin mit der Joker-Maut antwortet.
Es gibt bestimmte Regeln, auf denen dies akzeptabel ist,
vor allem, wenn wir Get-Operationen durchführen.
Es ist okay, das zu akzeptieren.
Andernfalls werden wir sagen, corsWithOptions = cors, und
dann liefern wir die) corsoPtionsDelegate)
Funktion, die wir gerade zuvor definiert haben.
Wenn Sie also A cors
mit bestimmten Optionen auf eine bestimmte Route anwenden müssen, verwenden wir diese Funktion.
Andernfalls verwenden wir einfach die Standard-Cors.
Nachdem wir nun den korsbezogenen Code in cors.js definiert haben,
beginnen wir, dies auf die verschiedenen Routen anzuwenden.
Also werden wir mit dem DishRouter beginnen.
Öffnen wir also den DishRouter, und
im DishRouter werden wir zuerst
[NOISE] importieren [NOISE]. /cors.
Beachten Sie, dass sich die Datei cors.js im selben Ordner befindet, so dass
wir das einfach importieren können, indem Sie sagen. /cors.js.
Dateibasiertes Knotenmodul.
Nun, für die GET-Anfrage, sobald wir das importiert haben.
Jetzt, für den DishRouter, werde ich das Optionsfeld einrichten.
Wie Sie gesehen haben, sendet
der Client zuerst die HTTP OPTIONS-Anforderungsnachricht und erhält dann
die Antwort von der Serverseite, bevor er die eigentliche Anfrage sendet.
Also, für Optionen, wenn die Optionsnachricht auf dieser bestimmten Route empfangen
wird, dann werden wir als cors.corsWithOptions antworten, und,
Mit der Callback-Funktion hier, die besagt,
res.sendStatus, 200.
Wir müssen nichts mehr als nur den Status von hier senden.
Und so, wenn eine Optionsnachricht empfangen
wird, wenn dies reagiert, werden wir sehen, welche Ergebnisse wir sehen, wenn wir eine Optionsanfrage
von der Client-Seite an die Serverseite in einem kurzen Flug senden.
Nun, diese Optionen, ich werde auf jede Route anwenden.
Also, für die dishid, für
die dishid/comments, und auch für
die dishid/comments start, /:commentID.
Also, alle Fälle, werde ich die gleichen Optionen dort anwenden.
Jetzt gehe ich zurück, für
die GET, werde ich einfach Cors anwenden.
Also, für die GET-Anfrage, werde ich sagen, Cors.cors,
so beachten Sie, dass dies die erste Middleware ist, die wir anwenden werden, und
danach wird es an diese Nachricht hier weitergegeben.
So wird die cors Middleware dort eingeführt.
Für den POST wenden sie cors.corsWithOptions an.
Dasselbe dafür, PUT,
DELETE.
Gleiches gilt für den verbleibenden POST, PUT und
DELETE auf allen anderen Routen hier.
Für das GET verwenden wir nur die cors,
also lassen Sie mich einfach die corsWithOptions auf POST
, PUT und DELETE in allen Routen hier anwenden,
also POST, PUT und DELETE.
Nun, für die GET-Operation, wie wir für
die Version von DishRouter gesehen haben, habe ich gerade cors.cors angewendet,
also werde ich das kopieren und es dann auf alle GET anwenden.
Also, für dieses GET, dann scrollen Sie nach unten für dieses GET, und
dann auch für das letzte, werde ich auch die gleiche Option anwenden.
So ist mein DishRouter jetzt aktualisiert.
Jetzt werde ich dasselbe mit dem Promorouter, dem
LeaderRouter, dem UploadRouter und auch der users.js machen.
Also, öffnen wir den LeaderRouter als nächstes.
Im LeaderRouter ist das erste, was natürlich ist,
das cors-dateibasierte Knotenmodul aufzunehmen, also
lassen Sie mich das kopieren und es dann in den LeaderRouter einfügen.
Dann werden die Optionen, ich werde das Gleiche auf den LeaderRouter auch anwenden.
Also für den LeaderRouter, werde ich die CorsWithOptions anwenden,
und dann dasselbe mit dem LeaderRouter oder LeaderID.
Sie haben hier nur zwei Routen, also werde ich die Optionen für beide anwenden.
Für die GET-Operationen
muss ich die cors.cors anwenden, also kopieren Sie dies vom DishRouter.
Dieses GET, ich werde das gleiche anwenden, und
dann auch dieses GET, Ich werde das gleiche anwenden.
Nun, für den POST, PUT und DELETE, wie Sie gesehen haben, werden wir cors.corsWithOptions,
Für den POST,
dann PUT und DELETE anwenden.
Und dasselbe für den POST, PUT und
DELETE der LeaderID auch.
Also, jetzt ist mein LeaderRouter aktualisiert, gehen wir zu Promorouter.
Und in der promorouter auch, lassen Sie uns unten hier für
die DELETE, CorsWithOptions, PUT, POST beginnen.
Dann zu diesem DELETE, PUT, POST.
Und für die GET, natürlich,
folgen die cors.cors diesem GET und den anderen GET unten hier unten.
Und dann, lassen Sie uns diese Cors importieren,
also kopieren Sie das von meinem LeaderRouter.
Dann importieren wir Cors hier und dann die Optionen.
Also, ich werde die Optionen von hier kopieren und
dann in den ProMorouter gehen, ich werde die Optionen hier anwenden.
Und auch zu den anderen PromorOuter, gleichen Optionen.
Jetzt, UploadRouter.
Also gehen Sie in den UploadRouter, wieder,
importieren, Cors,
Dann danach, für den UploadRouter.Route,
lassen Sie mich die Optionen dort anwenden.
Und für das GET
sagen wir cors.cors.
Der POST wäre cors.corsWithOptions.
Gleiches für die, PUT.
Und löschen, damit mein Upload-Router aktualisiert wird.
Der letzte ist Benutzer.
Also, in den Benutzern, lassen Sie mich,
Importieren Autos
, und dann, in diesem Fall, weil wir router.get, router.post, und so weiter.
Also für jeden von ihnen werde ich eingehen und explizit anwenden,
cars.carsWithOptions, auch für die GET hier.
Da das GET vom Administrator hier ausgeführt wird,
darf kein anderer Benutzer dies ausführen.
Aber die Anmeldung, auch CarsWithOptions für
den Login werde ich auch anwenden, Das ist es.
Lassen Sie uns alle Änderungen speichern, so
haben wir Updates alle verschiedenen Routen, um Autos zu verwenden.
Lassen Sie uns jetzt gehen und starten Sie unseren Server und dann sehen, wie diese Autos uns helfen.
Gehen Sie zum Terminal,
lassen Sie mich die Server-Site hier starten.
Und wenn der Server gestartet wird,
gehen wir zu unserem Postboten und senden Sie dann eine GET-Anfrage.
Wenn Sie also eine GET-Anfrage an einen localhost senden: 3000dishs,
erhalten Sie sofort eine Antwort von der Serverseite.
Natürlich ist meine Datenbank momentan leer, also bekomme ich hier ein leeres Array, aber
schauen wir uns insbesondere die Header an, denn das ist
der Punkt des Interesses für uns in dieser Übung.
Hier können Sie sehen, dass wir
hier einen zusätzlichen Header namens Access-Control-Allow-Origin haben.
So bietet der Access-Control-Allow-Origin, wie Sie sehen, das wilde Auto,
das ist der Stern hier.
Also bedeutet, dass jeder Ursprung, um auf diese bestimmte Ressource zuzugreifen,
so dass der Server sagt, dass in Ordnung, jeder Ursprung wird berechtigt, auf diese Ressource zugreifen.
Für die GET-Anfrage sind wir damit zufrieden.
Lassen Sie uns jetzt in das System einloggen, und
dann, sobald wir das Token erhalten, lassen Sie mich das Token hier kopieren.
Und dann führen wir einen Löschvorgang auf unserer Serverseite durch.
Also werden wir die Gerichte hier löschen, also
lassen Sie mich das, Token in den Autorisierungs-Header hier einfügen.
Und beachten Sie auch, dass ich für den Löschvorgang den Ursprung setze.
Also ein anderes Feld hier namens origin to localhost: 3343 hier. Dies
bedeutet, dass dieser Löschvorgang tatsächlich
versucht, an diesem bestimmten Ursprung hier zu löschen.
Und wenn wir diese Operation so durchführen, wenn Sie dies von einem Browser aus tun,
wird der Ursprung automatisch vom Browser basierend
auf der Webseite festgelegt, von der die Anfrage stammt.
Aber hier, da wir Postman verwenden, muss ich den Ursprung hier explizit festlegen.
Lassen Sie mich also die Anfrage mit diesem hier gesetzten Ursprungsfeld einsenden.
Und dann würden Sie feststellen, dass das Header-Feld jetzt
Access-Control-Allow-Origin mit dem hier angegebenen localhost: 3443 enthält.
Und wie Sie feststellen werden, dass dieser Ursprung in der weißen Liste ist.
Deshalb ist dieser Access-Control-Allow-Origin auf
den gleichen Ursprung gesetzt, den wir dort angegeben haben.
Wenn Sie zum Beispiel einen anderen Ursprung angeben,
wenn Sie angeben, Sagen Sie localhost: 2000 zum Beispiel.
Sie werden feststellen, dass dies nicht haben wird, in der Antwort vom Server,
dies wird nicht die Access-Control-Allow-Origin hier eingestellt.
Da diese bestimmte Adresse nicht in der Positivliste auf der Server-Site enthalten ist.
Schauen wir uns nun ein Beispiel für das Vorlesen einer Anfrage an.
Um dies zu tun, wählen Sie im Postboten Optionen hier,
und dann senden wir eine Preflighting Anfrage
an localhost: 3443dishs.
Und in der Kopfzeile werden wir, Setzen Sie
den Ursprung als: localhost3443.
Und dann sendet dies diese Anfrage an den Server.
Und als Antwort auf diese Optionsanfrage, die Sie an den Server gesendet
haben, werden Sie feststellen, dass wir in der Antwortnachricht 204 Kein Inhalt sagen.
Es gibt keinen Inhalt, der hier zurückgegeben werden soll.
Aber wenn Sie sich die Kopfzeilen der Antwortnachricht ansehen, die in kommt, beachten Sie, dass
wir den Access-Control-Allow-Origin auf diesen Wert gesetzt haben.
Beachten Sie auch, dass es die Access-Control-Allow Methoden setzt.
Und hier gibt es die Methoden an, die der Server
an diesem Endpunkt akzeptieren will.
Damit informieren Sie den Client und sagen, dass
alle diese Methoden für den Server am entsprechenden Endpunkt akzeptabel sind.
So können wir eine Anfrage vorlesen.
Durch Senden der Optionen Anforderungsnachricht zuerst,
und dann die Informationen vom Server hier zurück.
Und wie Sie sich erinnern, haben wir dies im
Optionsteil jedes Router-Endpunkts konfiguriert.
So können wir unsere Autos Knotenmodul konfigurieren und
dann unseren Server so konfigurieren, dass er mit verschiedenen Header-Nachrichten reagiert.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir gesehen, wie wir unseren Server so konfigurieren können, dass er
verschiedene kursbezogene Header in der Antwortnachricht
mit dem Kursknotenmodul zurücksenden kann.
Damit schließen wir diese Übung ab.
Dies ist ein guter Zeitpunkt für Sie, einen GIT-Kommentar mit dem Nachrichtenkurs zu machen.
( MUSIK)