[MUSIC]
Ayant compris quelques détails sur les cors dans la conférence précédente,
dans cet exercice, nous allons utiliser le module cors Node et configurer notre serveur express.
Pour permettre au serveur de répondre avec les
en-têtes associés cors appropriés à la demande provenant du site du client.
Pour commencer comme vous le souhaitez, nous allons d'abord installer le module cors Node.
Donc, à l'invite, tapez npm install.
Assurez-vous que vous êtes dans le dossier du serveur Confusion, puis cors — enregistrez.
Et puis installez le module cors.
Et comme vous pouvez le voir, dans ce cours, j'utilise cors @2 .8.4.
Une fois que vous avez installé le module cors,
allons dans notre éditeur et puis configurer notre serveur express.
Je vais voir notre rédacteur en chef.
Maintenant, dans le dossier routes, maintenant c'est là que j'appliquerais principalement
le module cors parce que c'est là que toutes les différentes routes sont desservies.
Donc, dans le dossier routes, je vais ajouter un nouveau fichier nommé cors.js.
Et puis dans ce fichier, nous allons configurer le module cors.
Maintenant, c'est ma façon de mettre toutes les informations relatives aux
cors dans un module de nœud basé sur un fichier séparé ici.
Donc, à l'invite,
permettez-moi d'essayer const express =
require ('express').
Et allons-y,
Le module cors dans.
Const app = express () ;
puis disons une liste blanche d'un tableau de chaînes.
La liste blanche contient toutes les origines
que ce serveur est prêt à accepter.
Maintenant, je vais inclure quelques d'entre eux ici,
localhost : 3000
, puis, hôte local 3443.
Et si vous avez besoin de plus d'origines à ajouter à votre liste blanche, vous pouvez simplement les ajouter
à votre liste blanche parce que j'essaie explicitement de configurer mon module cors.
Donc ici, je vais déclarer
une fonction A ici,
avec la requête et le rappel étant définis ici.
Et à l'intérieur, je vais comprendre que les options de cors ici.
Donc, je vais commencer par dire corsOptions,
var corsOptions ; et puis je
dirai si (Whitelist.indexOf (req.header ('Origin'-
))).
Donc, vous pouvez voir que nous spécifions ici dans le code ici,
nous disons req.header.
Donc, si l'en-tête de requête entrante contient un flux d'origine,
alors nous allons vérifier cette liste blanche.
À la recherche de cette origine particulière, est-elle présente dans cette liste blanche ?
C' est pourquoi nous disons Whitelist.indexOf.
Donc, c'est une opération de tableau qui se fait ici.
Et nous dirons dans l'origine n'est pas égale à -1.
Comme vous le savez, l'index d'opération retournera l'index supérieur ou
égal à zéro si cela est présent dans ce tableau.
Il retournera -1 si cela n'est pas présent dans ce tableau.
Donc, un moyen très rapide de vérifier si les
demandes entrantes proviennent de la liste blanche.
Dans ce cas, nous dirons
CorsOptions, CorsOptions.
corsOptions = et c'est là que je
vais spécifier {origin : true}
Donc en disant {origin : true}, ce qui signifie que l'
origine dans la requête entrante est dans la liste blanche.
Je vais donc permettre qu'elle soit acceptée.
Donc, quand je mets l'origine est égale à true ici, alors mon module cors
répondra en disant que le contrôle d'accès autorise l'origine, puis inclura cette origine dans
les en-têtes avec la clé d'origine de contrôle d'accès.
Donc, de cette façon, mon côté client sera informé en disant qu'il est correct pour
le serveur d'accepter cette requête pour cette origine particulière.
Sinon, donc si ce n'est pas le cas, donc
si le req.header ('Origine') n'est pas dans
la liste blanche, alors vous verrez CorsOptions.
{ origine : false}.
Donc, lorsque vous définissez l'origine sur false, alors le contrôleur d'accès
Alloworigin ne sera pas retourné par mon site serveur.
Et puis une fois que nous avons fait cela,
alors nous dirons callback (null, CorsOptions) ;.
C' est ça. Donc, en appelant cette fonction ici,
CorsoPtionsDelegate ici, nous allons vérifier si la
requête entrante appartient à l'une des origines de la liste blanche.
Si c'est le cas, alors vous répondez avec le contrôle d'accès
Alloworigin avec l'origine de la requête définie là.
Sinon, il n'inclura pas ce contrôle d'accès Alloworigin lorsqu'il répond.
Maintenant, à partir de cette fonction, nous allons exporter des cors en tant que cors ici.
Maintenant, si vous configurez le module cors en disant simplement cors
sans aucune option, cela signifie que cela
répondra avec le contrôle d'accès Alloworigin avec le péage wild cards.
Il y a certaines règles sur lesquelles cela est acceptable de faire,
surtout chaque fois que nous effectuons des opérations get.
C' est bon d'accepter ça.
Sinon, nous dirons, corsWithOptions = cors,
puis nous fournirons la)
fonction CorsoPtionsDelegate) que nous venons de définir plus tôt.
Ainsi, si vous avez besoin d'appliquer A cors
avec des options spécifiques à un itinéraire particulier, nous utiliserons cette fonction.
Sinon, nous allons simplement utiliser les cors standard.
Maintenant que nous avons défini le code lié aux cors dans cors.js,
commençons à l'appliquer aux différentes routes.
Donc, nous allons commencer avec le Dish.Router.
Alors ouvrons le Dish.Router, et
dans le Dish.Router, nous allons d'abord
importer [NOISE] [NOISE]. /cors.
Notez que le fichier cors.js est dans le même dossier, donc
nous pouvons simplement l'importer en disant. /cors.js.
Module de nœud basé sur un fichier.
Maintenant, pour la requête GET, une fois que nous avons importé cela.
Maintenant, pour le Dish.Router, je vais configurer le champ d'options.
Ainsi, comme vous l'avez vu, chaque fois que vous avez besoin de passer en amont vos requêtes,
le client envoie d'abord le message de requête HTTP OPTIONS, puis obtient
la réponse du côté serveur avant qu'il envoie réellement la requête réelle.
Donc, pour les options, si le message d'options est reçu sur cette route particulière,
alors nous répondrons comme cors.CorsWithOptions, et,
Avec la fonction de rappel ici, qui dit,
RES.SendStatus, 200.
Nous n'avons pas besoin d'envoyer quoi que ce soit de plus que le statut d'ici.
Et donc, quand un message d'options est reçu,
quand cela répondra, nous verrons quels résultats lorsque nous envoyons une demande
d'option du côté client vers le côté serveur dans un court vol.
Maintenant, ces options, je vais m'appliquer à chaque itinéraire.
Donc, pour le DishiD, pour
le DishiD/Comments, et aussi pour
le DishiD/Comments commencent, /:CommentID.
Donc, tous les cas, je vais appliquer les mêmes options là-bas.
Maintenant, en remontant, pour
le GET, je vais simplement appliquer des cors.
Donc, pour la requête GET, je dirai, Cors.cors,
alors notez que c'est le premier middleware que nous allons appliquer, et
après cela, il passera à ce message ici.
Donc, le middleware cors est introduit là.
Pour le POST, ils appliqueront Cors.corsWithOptions.
Même chose pour ça, PUT,
SUPPRIMER.
Même chose pour les autres POST, PUT et
DELETE sur toutes les autres routes ici.
Pour le GET, nous allons simplement utiliser les cors,
donc laissez-moi simplement appliquer les CorsWithOptions à POST
, PUT et DELETE dans toutes les routes ici,
donc POST, PUT et DELETE.
Maintenant, pour l'opération GET comme nous l'avons vu pour
la version de Dish.Router, je viens d'appliquer cors.cors,
donc je vais copier cela et ensuite l'appliquer à tous les GET.
Donc, pour ce GET, puis faites défiler vers le bas pour ce GET,
puis aussi pour le dernier, aussi j'appliquerai la même option.
Donc mon Dish.Router est maintenant mis à jour.
Maintenant, je vais faire la même chose avec le PromorOuter,
le LeaderRouter, le UploadRouter, et aussi le users.js.
Alors, ouvrons le LeaderRouter suivant.
Dans le LeaderRouter, la première chose bien sûr est d'
inclure le module de nœud basé sur un fichier cors, alors
laissez-moi le copier et ensuite le coller dans le LeaderRouter.
Ensuite, les options, je vais appliquer la même chose au LeaderRouter aussi.
Donc, pour le LeaderRouter, j'appliquerai le CorsWithOptions,
puis la même chose avec le LeaderRouter ou LeaderID.
Vous n'avez que deux itinéraires ici, donc je vais appliquer les options pour les deux.
Pour les opérations GET,
j'ai besoin d'appliquer les cors.cors, donc en copiant cela à partir du Dish.Router.
Ce GET, je vais appliquer la même chose, et
puis aussi ce GET, je vais appliquer la même chose.
Maintenant, pour le POST, PUT et DELETE, comme vous l'avez vu, nous allons appliquer cors.corsWithOptions,
Pour le POST,
puis PUT et DELETE.
Et la même chose pour le POST,
PUT et DELETE du LeaderID aussi.
Donc maintenant mon LeaderRouter est mis à jour, allons à Promorouter.
Et dans le PROMORouter aussi, commençons en bas ici pour
le DELETE, CorsWithOptions, PUT, POST.
Puis à cette SUPPRIMER, PUT, POST.
Et pour le GET, bien sûr,
les cors.cors suivent ce GET et l'autre GET ci-dessous.
Et puis, nous allons importer ces cors,
donc copier ceci à partir de mon LeaderRouter.
Ensuite, nous importons des cors ici, puis les options.
Donc, je vais copier les options d'ici et
puis aller dans le PROMORouter, je vais appliquer les options ici.
Et aussi à l'autre PromorOuter, les mêmes options.
Maintenant, UploadRouter.
Alors allez dans le UploadRouter, encore une fois
, importer, Cors,
Puis après cela, pour le UploadRouter.route,
laissez-moi appliquer les options là.
Et pour le GET,
nous dirons cors.cors.
Le POST serait Cors.corsWithOptions.
Même chose pour le, PUT.
Et supprimez, donc mon routeur de téléchargement est mis à jour.
Le dernier est les utilisateurs.
Donc, dans les utilisateurs, laissez-moi,
Importer des voitures, Et
puis, dans ce cas, parce que nous faisons router.get, router.post, et ainsi de suite.
Donc, pour chacun d'eux, je vais entrer et appliquer explicitement,
voitures.carsWithOptions, même pour le GET ici.
Étant donné que le GET est effectué par l'administrateur ici,
aucun autre utilisateur ne peut être autorisé à effectuer cela.
Mais l'inscription, aussi carsWithOptions pour
la connexion aussi je vais appliquer, C'est tout.
Sauvegardons tous les changements afin que
nous ayons mis à jour toutes les différentes routes pour utiliser les voitures.
Allons maintenant démarrer notre serveur et voir comment ces voitures nous aident.
Aller au terminal,
laissez-moi démarrer le site du serveur ici.
Et quand le serveur est démarré,
allons à notre Facteur et ensuite envoyer une requête GET.
Ainsi, lorsque vous envoyez une requête GET à un localhost : 3000plats,
vous obtiendrez immédiatement une réponse du côté serveur.
Bien sûr, en ce moment, ma base de données est vide, donc je reçois un tableau vide ici, mais
regardons en particulier les en-têtes parce que c'est là que
le point d'intérêt pour nous est dans cet exercice.
Donc, ici, vous pouvez voir que nous avons un en-tête supplémentaire
ici appelé Access-Control-Allow-Origin.
Ainsi, l'Access-Control-Allow-Origin comme vous le voyez fournit la voiture sauvage,
qui est la star ici.
Donc, ce qui signifie que, toute origine pour accéder à cette ressource particulière, de
sorte que le serveur dit que d'accord, n'importe quelle origine sera autorisée à accéder à cette ressource.
Pour la demande GET, nous sommes satisfaits de cela.
Laissez-nous maintenant nous connecter au système,
puis une fois que nous aurons obtenu le jeton, laissez-moi copier le jeton ici.
Ensuite, nous allons effectuer une opération de suppression sur notre site serveur.
Donc, nous allons supprimer les plats ici, alors
laissez-moi inclure le, Token dans l'en-tête d'autorisation ici.
Et notez également que pour l'opération de suppression, je suis en train de définir l'origine.
Donc, un autre champ ici appelé origine à localhost : 3343 ici.
Donc, indiquant que cette opération de suppression
essaie réellement de supprimer à cette origine particulière ici.
Et donc, lorsque nous effectuons cette opération, si vous faites cela à partir d'un navigateur,
l'origine sera automatiquement définie par le navigateur en fonction de
la page Web à partir de laquelle la demande est originaire.
Mais ici, puisque nous utilisons Postman, je dois explicitement définir l'origine ici.
Alors laissez-moi envoyer la demande avec ce champ d'origine défini ici.
Et puis vous remarquerez que le champ d'en-tête contient maintenant
Access-Control-Allow-Origin avec le localhost:3443 spécifié ici.
Et comme vous remarquerez que cette origine est dans la liste blanche.
C' est pourquoi cet Access-Control-Allow-Origin est défini
sur la même origine que nous y avons spécifiée.
Si vous spécifiez une autre origine par exemple,
si vous spécifiez, Say localhost:2000 par exemple.
Vous remarquerez que cela n'aura pas, dans la réponse provenant du serveur,
cela n'aura pas l'Access-Control-Allow-Origin défini ici.
Parce que, cette adresse particulière ne figure pas dans la liste blanche sur le site du serveur.
Regardons maintenant un exemple de pré-vol d'une demande.
Donc, pour ce faire, dans le Facteur, sélectionnez Options ici,
puis envoyons une demande de prévol
à localhost : 3443plats.
Et dans l'en-tête, nous allons, Mettez
l'origine en tant que :localhost3443.
Et puis cela envoie cette requête au serveur.
Et en réponse à cette demande d'options que vous avez envoyée au serveur,
vous remarquerez que dans le message de réponse, nous dirons 204 Pas de contenu. Il
n'y a pas de contenu à renvoyer ici.
Mais, lorsque vous regardez les en-têtes du message de réponse qui arrive, notez que
nous avons l'Access-Control-Allow-Origin à définir sur cette valeur.
Notez également qu'il définit les méthodes Access-Control-Allow.
Et ici, il spécifie les méthodes que le serveur sera
prêt à accepter à ce point final.
Ainsi, vous informez le client en disant que,
toutes ces méthodes sont acceptables pour le serveur au point de fin correspondant.
Donc, c'est comme ça que nous pouvons faire le pré-vol d'une demande.
En envoyant d'abord le message de demande d'options,
puis en récupérant les informations du serveur ici.
Et comme vous vous en souvenez, c'est ce que nous avons configuré dans la
partie options de chacun des points d'extrémité du routeur.
C' est ainsi que nous pouvons configurer notre module de noeud de voitures
, puis configurer notre serveur pour répondre avec divers messages d'en-tête.
Avec cela, nous complétons cet exercice.
Dans cet exercice, nous avons vu comment nous pouvons configurer notre serveur pour pouvoir
renvoyer divers en-têtes liés au cours dans le message de réponse en
utilisant le module de noeud de cours.
Avec cela, nous complétons cet exercice.
C' est un bon moment pour vous de faire un commentaire GIT avec le cours de message.
[ MUSIQUE]