‫Jonas : Dans cette conférence, nous
‫allons implémenter quelque chose appelé CORS, ce qui signifie le partage de ressources d'origine croisée.
‫Et c'est une fonctionnalité fondamentale de toute API, mais je
‫ne peux vous le
‫montrer que maintenant que l'application est déjà déployée.
‫Maintenant, qu'est-ce que le partage de ressources cross-origin, et pourquoi
‫devons-nous le mettre en œuvre ?
‫Eh bien, disons que nous avons notre
‫API ici chez natours-jonas. herokuapp. com/api/v1, et ainsi
‫de suite.
‫Et puis un autre site Web, par exemple à example. com, essaie
‫d'accéder à notre API.
‫Essayant donc essentiellement d'appeler cette URL ici.
‫Et cela s'appelle alors une demande d'origine
‫croisée, car herokuapp. com est un domaine différent
‫de example. com, et donc si exemple. com essaie
‫d'accéder à herokuapp. com, ce
‫sera une demande d'origine croisée, d'accord ?
‫Désormais, les requêtes cross-origin ne sont généralement pas
‫autorisées et échoueront par défaut, sauf si nous implémentons
‫CORS, donc le partage des ressources cross-origin.
‫Et puisque nous voulons rendre notre API
‫accessible à tous, nous devons absolument l'implémenter, d'accord ?
‫Maintenant, laissez-moi vous montrer comment cela échouerait.
‫Alors saisissons cette URL
‫ici, ouvrons-la dans votre onglet, puis inspectons.
‫Et donc, en gros, faisons une requête HTTP à notre API ici
‫depuis la console, d'accord ?
‫Parce que fondamentalement, lorsque nous le ferons à
‫partir d'ici, ce sera également une demande d'origine croisée.
‫Disons simplement que const x est égal à
‫wait, puis utilisons la fonction fetch JavaScript, d'accord ?
‫Donc, fetch est fondamentalement une
‫fonction un peu similaire à la bibliothèque Axios
‫que nous avons utilisée dans notre code,
‫mais c'est du JavaScript natif dans le navigateur,
‫et nous pouvons donc simplement l'utiliser ici dans la console.
‫Alors disons que nous voulons faire
‫une requête à notre API de visites comme celle-ci, d'accord ?
‫Donc, si nous essayons cela maintenant, voyons ce que nous obtenons.
‫Et en effet, nous
‫obtenons l'erreur selon laquelle essayer d'accéder à ce
‫chemin ici à partir de cette autre origine a été bloqué par la politique CORS.
‫Et c'est exactement ce que j'ai dit avant.
‫Ainsi, par défaut, une requête cross-origin
‫sera toujours bloquée.
‫À propos, cela ne s'applique qu'aux demandes faites
‫à partir du navigateur.
‫Par exemple, en utilisant l'API fetch ici, ou quelque chose
‫comme la bibliothèque Axios que nous avons
‫utilisée dans notre code.
‫Et donc ça veut dire qu'à
‫partir du serveur, on pourra toujours faire des requêtes cross-origin
‫sans aucun problème.
‫Il n'y a donc aucune restriction sur le
‫serveur, mais vraiment uniquement sur
‫le navigateur, pour des raisons de sécurité essentiellement.
‫Oh, et aussi pour être considérée comme une origine croisée,
‫une demande peut provenir d'un domaine différent.
‫Ainsi, tout comme nous l'avons vu dans notre
‫premier exemple ici, un sous-domaine différent, un protocole différent
‫ou même un port différent est également
‫considéré comme une requête d'origine croisée.
‫Ainsi, par exemple, si nous avions API. natours. com pour notre API,
‫puis ferait une demande à natours. com, cela serait
‫alors également considéré comme une demande d'origine
‫croisée et échouerait, d'accord ?
‫Mais encore une fois, puisque nous voulons permettre
‫à d'autres sites Web d'accéder essentiellement à
‫notre API, implémentons maintenant le partage de ressources cross-origin.
‫Très bien, et nous le faisons encore une fois
‫en installant un package NPM.
‫Donc, installez NPM, et simplement CORS.
‫Alors ici, nous avons besoin de ce package.
‫Et encore une fois, ce CORS
‫ici est une fonction
‫middleware très simple que nous devons maintenant utiliser pour notre application, d'accord ?
‫Alors faisons-le ici, et pourquoi ne pas le faire ici
‫tout en haut ?
‫Disons donc implémenter CORS.
‫Et donc app. use, puis appelez CORS, qui
‫à son tour renverra une fonction middleware
‫qui ajoutera ensuite quelques en-têtes différents
‫à notre réponse.
‫Et puisque toute cette fonction middleware ici consiste
‫essentiellement à ajouter des en-têtes spécifiques, vous pensez peut-être «
‫Pourquoi utilisons-nous » encore un autre
‫package NPM ? " Eh
‫bien, jetons un coup d'œil au
‫code de ce paquet.
‫Donc GitHub CORS, donc encore une fois, c'est
‫généralement comme ça que je trouve la documentation ou
‫le code source lui-même pour mes packages.
‫Et donc allons ici dans lib, qui
‫signifie généralement bibliothèque.
‫Et puis tout ce que nous avons vraiment ici, c'est cet indice. js.
‫Et donc vous voyez que voici tout le code, et
‫fondamentalement, ce que
‫vous voyez ici, c'est qu'il ajoute simplement cet
‫en-tête ici avec la valeur de pratiquement tout aux en-têtes.
‫Très bien, alors vous avez quelques
‫autres en-têtes, Access-Control-Allow-Methods, allow-credentials, et c'est
‫pour différents cas.
‫D'accord, mais vous voyez qu'il
‫ne s'agit vraiment que d'en-têtes ici.
‫Alors oui, peut-être pourrions-nous simplement ajouter ces en-têtes nous-mêmes, mais
‫pourquoi le ferions-nous réellement ?
‫Je veux dire que nous
‫pourrions bien sûr, afin de bien comprendre vraiment comment cela fonctionne,
‫mais dans Node. js et le
‫développement Express, dans l'environnement réel, vous ne
‫voudrez généralement pas réinventer la roue, et à
‫la place, chaque fois que vous
‫le pouvez, utilisez des packages que d'autres développeurs ont écrits pour nous.
‫Donc, vraiment, nous nous concentrons uniquement sur le fonctionnement de notre
‫application, au lieu de réécrire le code
‫que d'autres développeurs ont déjà écrit pour nous, d'accord ?
‫Nous pouvons donc jeter un œil
‫à tout cela, mais comme je l'ai mentionné, nous pouvons aussi
‫simplement aller de l'avant et utiliser cela, d'accord ?
‫Quoi qu'il en soit, c'est ainsi que nous activons le partage de ressources cross-origin
‫pour toutes les demandes entrantes.
‫Donc en gros pour l'ensemble de notre API.
‫Mais disons que nous voulions seulement activer CORS
‫sur une route spécifique.
‫Nous pourrions donc l'utiliser également, alors copions simplement ceci.
‫Et donc si nous voulions seulement activer CORS, disons sur
‫les tournées, eh bien, nous
‫pourrions simplement l'ajouter ici dans cette pile de middleware.
‫D'accord, mais encore une fois dans ce cas,
‫nous voulons vraiment l'autoriser partout.
‫Ainsi, comme nous l'avons vu précédemment
‫dans le
‫code GitHub, cela permet de définir l'en-tête Access-Control-Allow-Origin sur tout.
‫Et donc ce que tout cela
‫signifie ici, c'est pour toutes les demandes, peu importe d'où elles viennent.
‫Et donc c'est idéal pour permettre à tout
‫le monde de consommer notre API.
‫Mais imaginez maintenant le
‫cas où nous ne voulons pas partager
‫notre API, mais nous voulons pouvoir avoir l'API sur
‫un domaine, ou même un sous-domaine, puis
‫avoir notre application frontale sur un domaine différent.
‫Par exemple, disons que, comme je l'ai déjà mentionné, nous avions
‫notre API à l'API. natours. com, mais ensuite
‫notre application frontale chez natours. com.
‫Et donc dans ce cas, tout ce
‫que nous voulons qu'il fasse, c'est d'autoriser l'accès à partir de cette origine ici, en gros.
‫Et donc dans ce cas, nous utiliserions app. use, puis CORS, puis
‫passez un objet pour les options où nous
‫spécifierions l'origine, disons
‫HTTPS://www. natours. com.
‫Et ce n'est donc qu'un exemple
‫au cas où nous aurions notre front-end chez natours. com, d'accord?
‫Et encore une fois, avec cela, nous autoriserions
‫uniquement cette URL, donc cette origine, pour créer
‫des requêtes à l'API. natours. com.
‫Et bien sûr, nous pourrions également permettre d'autres origines.
‫Par exemple, uniquement pour certains sites
‫Web spécifiques que nous souhaitons autoriser, d'accord ?
‫Mais encore une fois, dans ce cas, nous voulons vraiment permettre à tout le monde.
‫D'accord, c'était donc la première partie de l'activation de CORS, mais
‫en fait ce n'est pas tout, car
‫pour le moment, cela ne
‫fonctionnera que pour les requêtes dites simples.
‫Et les requêtes simples sont des requêtes get et post.
‫En revanche, nous avons des demandes dites non simples.
‫Et ce sont des demandes de mise, de correctif et de
‫suppression, ou également des demandes qui envoient des
‫cookies ou utilisent des en-têtes non standard.
‫Et ces demandes non simples,
‫elles nécessitent une phase dite de contrôle en amont.
‫Ainsi, à chaque fois qu'il y a une requête non
‫simple, le navigateur émet alors automatiquement la
‫phase de contrôle en amont, et c'est ainsi que cela fonctionne.
‫Ainsi, avant que la vraie demande ne se
‫produise, et disons une demande de
‫suppression, le navigateur fait d'abord une demande d'options afin
‫de déterminer si la demande réelle peut être
‫envoyée en toute sécurité.
‫Et donc ce que cela signifie pour
‫nous, les développeurs, c'est que sur notre serveur, nous devons
‫réellement répondre à cette demande d'options.
‫Et les options ne sont en réalité qu'une
‫autre méthode HTTP, donc tout comme get, post ou delete, d'accord ?
‫Donc, fondamentalement, lorsque nous recevons l'une de ces
‫demandes d'options sur notre serveur,
‫nous devons ensuite renvoyer le même en-tête Access-Control-Allow-Origin.
‫Et de cette façon, le navigateur saura
‫alors que la
‫demande réelle, et dans ce cas la demande de suppression, peut
‫être exécutée en toute sécurité, puis exécute la demande de suppression elle-même, d'accord ?
‫Alors faisons-le et disons app. option.
‫D'accord, et encore une fois, c'est très similaire à faire
‫une application. obtenir par exemple, ou . Publier, . effacer, . patch, et
‫tous ces verbes que vous connaissez déjà.
‫Alors . options n'est pas de définir des options sur
‫notre application, c'est vraiment juste une autre méthode HTTP à laquelle nous pouvons répondre.
‫Et encore une fois, dans ce cas, nous devons y répondre
‫car le navigateur envoie une demande d'option
‫lorsqu'il y a une phase de contrôle en amont.
‫Nous devons donc définir
‫la route pour laquelle nous voulons gérer les options.
‫Et encore une fois, nous le ferons sur toutes les routes, d'accord ?
‫Et puis, en gros, le
‫gestionnaire, qui est encore une fois le middleware CORS, d'accord ?
‫Et encore une fois, nous ne pouvions bien
‫sûr autoriser ces requêtes complexes que sur un itinéraire spécifique.
‫Par exemple l'application. options,
‫et disons uniquement sur api/v1/tours/:id,
‫comme ça, d'accord ?
‫Supposons donc que quelqu'un fasse une demande de suppression ou de correctif pour
‫l'une des tournées, et seulement là, nous autorisons
‫une phase de contrôle en amont.
‫Et donc fondamentalement, uniquement sur cette
‫route ici, une de ces requêtes complexes peut être effectuée.
‫Donc, dans ce cas où nous n'avions que cet itinéraire d'options, seules les
‫tournées pouvaient être supprimées ou corrigées
‫à partir d'une requête cross-origin, n'est-ce pas ?
‫Et aucune de nos autres ressources, d'accord ?
‫Mais encore une fois, permettons-les tous, d'accord ?
‫Mais je vais quand même vous laisser cela ici à titre d'exemple.
‫Bon, de toute façon, c'est tout ce que nous avons vraiment
‫à faire pour activer CORS pour notre application.
‫Et donc redéployons maintenant l'application en la
‫poussant à nouveau vers Heroku.
‫Mais avant de faire cela, je veux en fait changer quelque chose
‫ici dans notre paquet. json.
‫Et c'est ce moteur de nœud ici.
‫Donc, parfois, cela peut créer des
‫problèmes lorsque nous spécifions la version comme celle-ci.
‫Donc, en gros, autoriser l'installation de versions
‫supérieures à la version que
‫nous exécutons actuellement.
‫Et donc ce que je
‫veux faire ici, c'est dire qu'il ne devrait installer que la version
‫10, et non une version après cela.
‫Je le fais donc en disant ce symbole caret ici, puis
‫la version 10.
‫Et donc encore une fois, cela utilise le versioning sémantique,
‫et donc comme ici.
‫Ce qui, rappelons-le, signifie que NPM est
‫autorisé à installer l'une de ces sous-versions ou versions de
‫correctif, mais pas à passer à la prochaine version majeure.
‫Et donc ici ce que je fais est le même, d'accord ?
‫Donc, j'exécute actuellement quelque chose de Node version 10, et vous
‫pouvez donc confirmer le vôtre en tapant node -v, et vous voyez donc que
‫je suis sur 10. 11 en ce moment.
‫Mais probablement quand vous regardez ce
‫cours, vous allez être au moins à la version 12, peut-être même 14 ou 16, selon
‫combien de temps vous êtes dans le futur, d'accord ?
‫Et ne vous inquiétez pas, bien
‫sûr, tout ce que je vous montre ici dans le
‫cours devrait toujours fonctionner
‫correctement quelle que soit la version de Node que vous utilisez.
‫Donc, si vous utilisez la
‫version 12, alors s'il vous plaît allez-y et mettez le 12 ici, d'accord ?
‫Quoi qu'il en soit, ajoutons maintenant tous les
‫fichiers modifiés à la zone de transit, donc git add all.
‫Et puis engagez-les avec un message significatif, donc mis
‫en œuvre CORS.
‫Et puis poussez le maître Heroku.
‫Et maintenant, cela prend un certain
‫temps, alors je vous verrai quand ce sera fait.
‫L'application est donc déployée avec succès maintenant, rechargeons-la rapidement
‫ici juste pour voir si
‫elle fonctionne toujours, et c'est effectivement le cas.
‫Et maintenant, pour vous prouver que cela fonctionne différemment avec CORS, si nous
‫renouvelons cette demande ici,
‫cela devrait alors fonctionner, n'est-ce pas ?
‫Alors essayons ça, et c'est parti.
‫Pas d'erreur cette fois, vérifions x ici.
‫Et effectivement, on dirait qu'il y a quelque chose ici.
‫Donc vous voyez qu'en fait la réponse est de type CORS,
‫nous avons nos en-têtes, eh bien, je ne peux pas vraiment les voir ici.
‫Cela n'a pas d'importance, ici nous avons aussi
‫juste une chaîne lisible, mais
‫encore une fois ce n'est pas important du tout.
‫Ce qui compte ici, c'est
‫que maintenant nous sommes capables d'effectuer des requêtes cross-origin, donc c'est fantastique.
‫Maintenant, permettez-moi de vous montrer également les en-têtes
‫réels que le package
‫CORS ajoute en effectuant simplement une requête ici dans Postman.
‫Donc en production, envoyons-le maintenant.
‫Et donc ici, vous voyez
‫dans les en-têtes de réponse que nous
‫avons en fait cet Access-Control-Allow-Origin défini sur tout, d'accord, super.
‫Et c'est ainsi que vous implémentez réellement le partage
‫de ressources cross-origin dans votre propre application.