1
00:00:01,210 --> 00:00:03,330
‫Jonas : Dans cette conférence, nous

2
00:00:03,330 --> 00:00:08,020
‫allons implémenter quelque chose appelé CORS, ce qui signifie le partage de ressources d'origine croisée.

3
00:00:08,020 --> 00:00:11,670
‫Et c'est une fonctionnalité fondamentale de toute API, mais je

4
00:00:11,670 --> 00:00:13,400
‫ne peux vous le

5
00:00:13,400 --> 00:00:16,183
‫montrer que maintenant que l'application est déjà déployée.

6
00:00:17,900 --> 00:00:21,610
‫Maintenant, qu'est-ce que le partage de ressources cross-origin, et pourquoi

7
00:00:21,610 --> 00:00:24,170
‫devons-nous le mettre en œuvre ?

8
00:00:24,170 --> 00:00:26,610
‫Eh bien, disons que nous avons notre

9
00:00:26,610 --> 00:00:31,610
‫API ici chez natours-jonas. herokuapp. com/api/v1, et ainsi

10
00:00:34,570 --> 00:00:36,180
‫de suite.

11
00:00:36,180 --> 00:00:40,393
‫Et puis un autre site Web, par exemple à example. com, essaie

12
00:00:41,860 --> 00:00:44,380
‫d'accéder à notre API.

13
00:00:44,380 --> 00:00:48,470
‫Essayant donc essentiellement d'appeler cette URL ici.

14
00:00:48,470 --> 00:00:51,730
‫Et cela s'appelle alors une demande d'origine

15
00:00:51,730 --> 00:00:54,940
‫croisée, car herokuapp. com est un domaine différent

16
00:00:54,940 --> 00:00:58,550
‫de example. com, et donc si exemple. com essaie

17
00:00:58,550 --> 00:01:01,570
‫d'accéder à herokuapp. com, ce

18
00:01:01,570 --> 00:01:05,520
‫sera une demande d'origine croisée, d'accord ?

19
00:01:05,520 --> 00:01:09,160
‫Désormais, les requêtes cross-origin ne sont généralement pas

20
00:01:09,160 --> 00:01:13,290
‫autorisées et échoueront par défaut, sauf si nous implémentons

21
00:01:13,290 --> 00:01:16,660
‫CORS, donc le partage des ressources cross-origin.

22
00:01:16,660 --> 00:01:20,660
‫Et puisque nous voulons rendre notre API

23
00:01:20,660 --> 00:01:25,240
‫accessible à tous, nous devons absolument l'implémenter, d'accord ?

24
00:01:25,240 --> 00:01:27,933
‫Maintenant, laissez-moi vous montrer comment cela échouerait.

25
00:01:28,800 --> 00:01:31,073
‫Alors saisissons cette URL

26
00:01:31,920 --> 00:01:35,743
‫ici, ouvrons-la dans votre onglet, puis inspectons.

27
00:01:36,770 --> 00:01:41,320
‫Et donc, en gros, faisons une requête HTTP à notre API ici

28
00:01:41,320 --> 00:01:43,540
‫depuis la console, d'accord ?

29
00:01:43,540 --> 00:01:45,840
‫Parce que fondamentalement, lorsque nous le ferons à

30
00:01:45,840 --> 00:01:48,273
‫partir d'ici, ce sera également une demande d'origine croisée.

31
00:01:49,260 --> 00:01:53,440
‫Disons simplement que const x est égal à

32
00:01:53,440 --> 00:01:58,100
‫wait, puis utilisons la fonction fetch JavaScript, d'accord ?

33
00:01:58,100 --> 00:02:00,050
‫Donc, fetch est fondamentalement une

34
00:02:00,050 --> 00:02:02,600
‫fonction un peu similaire à la bibliothèque Axios

35
00:02:02,600 --> 00:02:04,640
‫que nous avons utilisée dans notre code,

36
00:02:04,640 --> 00:02:07,080
‫mais c'est du JavaScript natif dans le navigateur,

37
00:02:07,080 --> 00:02:10,100
‫et nous pouvons donc simplement l'utiliser ici dans la console.

38
00:02:10,100 --> 00:02:12,900
‫Alors disons que nous voulons faire

39
00:02:12,900 --> 00:02:17,460
‫une requête à notre API de visites comme celle-ci, d'accord ?

40
00:02:17,460 --> 00:02:20,870
‫Donc, si nous essayons cela maintenant, voyons ce que nous obtenons.

41
00:02:20,870 --> 00:02:22,480
‫Et en effet, nous

42
00:02:22,480 --> 00:02:24,990
‫obtenons l'erreur selon laquelle essayer d'accéder à ce

43
00:02:24,990 --> 00:02:29,900
‫chemin ici à partir de cette autre origine a été bloqué par la politique CORS.

44
00:02:29,900 --> 00:02:32,350
‫Et c'est exactement ce que j'ai dit avant.

45
00:02:32,350 --> 00:02:35,320
‫Ainsi, par défaut, une requête cross-origin

46
00:02:35,320 --> 00:02:37,250
‫sera toujours bloquée.

47
00:02:37,250 --> 00:02:40,270
‫À propos, cela ne s'applique qu'aux demandes faites

48
00:02:40,270 --> 00:02:41,880
‫à partir du navigateur.

49
00:02:41,880 --> 00:02:44,990
‫Par exemple, en utilisant l'API fetch ici, ou quelque chose

50
00:02:44,990 --> 00:02:47,260
‫comme la bibliothèque Axios que nous avons

51
00:02:47,260 --> 00:02:49,010
‫utilisée dans notre code.

52
00:02:49,010 --> 00:02:51,210
‫Et donc ça veut dire qu'à

53
00:02:51,210 --> 00:02:54,500
‫partir du serveur, on pourra toujours faire des requêtes cross-origin

54
00:02:54,500 --> 00:02:55,920
‫sans aucun problème.

55
00:02:55,920 --> 00:02:58,620
‫Il n'y a donc aucune restriction sur le

56
00:02:58,620 --> 00:03:00,500
‫serveur, mais vraiment uniquement sur

57
00:03:00,500 --> 00:03:03,080
‫le navigateur, pour des raisons de sécurité essentiellement.

58
00:03:03,080 --> 00:03:06,680
‫Oh, et aussi pour être considérée comme une origine croisée,

59
00:03:06,680 --> 00:03:09,440
‫une demande peut provenir d'un domaine différent.

60
00:03:09,440 --> 00:03:12,020
‫Ainsi, tout comme nous l'avons vu dans notre

61
00:03:12,020 --> 00:03:15,160
‫premier exemple ici, un sous-domaine différent, un protocole différent

62
00:03:15,160 --> 00:03:17,650
‫ou même un port différent est également

63
00:03:17,650 --> 00:03:19,950
‫considéré comme une requête d'origine croisée.

64
00:03:19,950 --> 00:03:24,950
‫Ainsi, par exemple, si nous avions API. natours. com pour notre API,

65
00:03:27,100 --> 00:03:31,480
‫puis ferait une demande à natours. com, cela serait

66
00:03:31,480 --> 00:03:34,650
‫alors également considéré comme une demande d'origine

67
00:03:34,650 --> 00:03:37,200
‫croisée et échouerait, d'accord ?

68
00:03:37,200 --> 00:03:39,950
‫Mais encore une fois, puisque nous voulons permettre

69
00:03:39,950 --> 00:03:42,410
‫à d'autres sites Web d'accéder essentiellement à

70
00:03:42,410 --> 00:03:45,423
‫notre API, implémentons maintenant le partage de ressources cross-origin.

71
00:03:46,680 --> 00:03:49,620
‫Très bien, et nous le faisons encore une fois

72
00:03:49,620 --> 00:03:51,653
‫en installant un package NPM.

73
00:03:53,130 --> 00:03:55,940
‫Donc, installez NPM, et simplement CORS.

74
00:03:57,770 --> 00:03:59,933
‫Alors ici, nous avons besoin de ce package.

75
00:04:08,140 --> 00:04:10,450
‫Et encore une fois, ce CORS

76
00:04:10,450 --> 00:04:12,480
‫ici est une fonction

77
00:04:12,480 --> 00:04:17,480
‫middleware très simple que nous devons maintenant utiliser pour notre application, d'accord ?

78
00:04:17,580 --> 00:04:20,250
‫Alors faisons-le ici, et pourquoi ne pas le faire ici

79
00:04:20,250 --> 00:04:21,533
‫tout en haut ?

80
00:04:22,980 --> 00:04:25,930
‫Disons donc implémenter CORS.

81
00:04:28,240 --> 00:04:32,380
‫Et donc app. use, puis appelez CORS, qui

82
00:04:32,380 --> 00:04:35,270
‫à son tour renverra une fonction middleware

83
00:04:35,270 --> 00:04:37,860
‫qui ajoutera ensuite quelques en-têtes différents

84
00:04:37,860 --> 00:04:39,580
‫à notre réponse.

85
00:04:39,580 --> 00:04:41,870
‫Et puisque toute cette fonction middleware ici consiste

86
00:04:41,870 --> 00:04:44,820
‫essentiellement à ajouter des en-têtes spécifiques, vous pensez peut-être «

87
00:04:44,820 --> 00:04:46,767
‫Pourquoi utilisons-nous » encore un autre

88
00:04:46,767 --> 00:04:49,060
‫package NPM ? " Eh

89
00:04:49,060 --> 00:04:51,240
‫bien, jetons un coup d'œil au

90
00:04:51,240 --> 00:04:52,853
‫code de ce paquet.

91
00:04:55,370 --> 00:04:58,820
‫Donc GitHub CORS, donc encore une fois, c'est

92
00:04:58,820 --> 00:05:02,490
‫généralement comme ça que je trouve la documentation ou

93
00:05:02,490 --> 00:05:05,610
‫le code source lui-même pour mes packages.

94
00:05:05,610 --> 00:05:08,730
‫Et donc allons ici dans lib, qui

95
00:05:08,730 --> 00:05:10,793
‫signifie généralement bibliothèque.

96
00:05:11,870 --> 00:05:15,960
‫Et puis tout ce que nous avons vraiment ici, c'est cet indice. js.

97
00:05:15,960 --> 00:05:20,020
‫Et donc vous voyez que voici tout le code, et

98
00:05:20,020 --> 00:05:21,500
‫fondamentalement, ce que

99
00:05:21,500 --> 00:05:24,730
‫vous voyez ici, c'est qu'il ajoute simplement cet

100
00:05:24,730 --> 00:05:28,653
‫en-tête ici avec la valeur de pratiquement tout aux en-têtes.

101
00:05:29,850 --> 00:05:33,740
‫Très bien, alors vous avez quelques

102
00:05:33,740 --> 00:05:37,320
‫autres en-têtes, Access-Control-Allow-Methods, allow-credentials, et c'est

103
00:05:37,320 --> 00:05:40,003
‫pour différents cas.

104
00:05:40,900 --> 00:05:42,800
‫D'accord, mais vous voyez qu'il

105
00:05:42,800 --> 00:05:45,010
‫ne s'agit vraiment que d'en-têtes ici.

106
00:05:45,010 --> 00:05:49,000
‫Alors oui, peut-être pourrions-nous simplement ajouter ces en-têtes nous-mêmes, mais

107
00:05:49,000 --> 00:05:51,430
‫pourquoi le ferions-nous réellement ?

108
00:05:51,430 --> 00:05:52,810
‫Je veux dire que nous

109
00:05:52,810 --> 00:05:56,260
‫pourrions bien sûr, afin de bien comprendre vraiment comment cela fonctionne,

110
00:05:56,260 --> 00:05:58,790
‫mais dans Node. js et le

111
00:05:58,790 --> 00:06:01,010
‫développement Express, dans l'environnement réel, vous ne

112
00:06:01,010 --> 00:06:03,440
‫voudrez généralement pas réinventer la roue, et à

113
00:06:03,440 --> 00:06:05,340
‫la place, chaque fois que vous

114
00:06:05,340 --> 00:06:08,810
‫le pouvez, utilisez des packages que d'autres développeurs ont écrits pour nous.

115
00:06:08,810 --> 00:06:12,110
‫Donc, vraiment, nous nous concentrons uniquement sur le fonctionnement de notre

116
00:06:12,110 --> 00:06:14,740
‫application, au lieu de réécrire le code

117
00:06:14,740 --> 00:06:17,750
‫que d'autres développeurs ont déjà écrit pour nous, d'accord ?

118
00:06:17,750 --> 00:06:20,070
‫Nous pouvons donc jeter un œil

119
00:06:20,070 --> 00:06:23,930
‫à tout cela, mais comme je l'ai mentionné, nous pouvons aussi

120
00:06:23,930 --> 00:06:27,110
‫simplement aller de l'avant et utiliser cela, d'accord ?

121
00:06:27,110 --> 00:06:31,190
‫Quoi qu'il en soit, c'est ainsi que nous activons le partage de ressources cross-origin

122
00:06:31,190 --> 00:06:32,890
‫pour toutes les demandes entrantes.

123
00:06:32,890 --> 00:06:35,560
‫Donc en gros pour l'ensemble de notre API.

124
00:06:35,560 --> 00:06:37,950
‫Mais disons que nous voulions seulement activer CORS

125
00:06:37,950 --> 00:06:39,490
‫sur une route spécifique.

126
00:06:39,490 --> 00:06:43,253
‫Nous pourrions donc l'utiliser également, alors copions simplement ceci.

127
00:06:44,310 --> 00:06:48,250
‫Et donc si nous voulions seulement activer CORS, disons sur

128
00:06:48,250 --> 00:06:50,360
‫les tournées, eh bien, nous

129
00:06:50,360 --> 00:06:53,930
‫pourrions simplement l'ajouter ici dans cette pile de middleware.

130
00:06:53,930 --> 00:06:56,930
‫D'accord, mais encore une fois dans ce cas,

131
00:06:56,930 --> 00:06:59,233
‫nous voulons vraiment l'autoriser partout.

132
00:07:00,210 --> 00:07:03,400
‫Ainsi, comme nous l'avons vu précédemment

133
00:07:03,400 --> 00:07:04,980
‫dans le

134
00:07:04,980 --> 00:07:09,980
‫code GitHub, cela permet de définir l'en-tête Access-Control-Allow-Origin sur tout.

135
00:07:14,120 --> 00:07:16,040
‫Et donc ce que tout cela

136
00:07:16,040 --> 00:07:19,670
‫signifie ici, c'est pour toutes les demandes, peu importe d'où elles viennent.

137
00:07:19,670 --> 00:07:22,350
‫Et donc c'est idéal pour permettre à tout

138
00:07:22,350 --> 00:07:24,380
‫le monde de consommer notre API.

139
00:07:24,380 --> 00:07:25,940
‫Mais imaginez maintenant le

140
00:07:25,940 --> 00:07:28,440
‫cas où nous ne voulons pas partager

141
00:07:28,440 --> 00:07:31,590
‫notre API, mais nous voulons pouvoir avoir l'API sur

142
00:07:31,590 --> 00:07:33,960
‫un domaine, ou même un sous-domaine, puis

143
00:07:33,960 --> 00:07:36,760
‫avoir notre application frontale sur un domaine différent.

144
00:07:36,760 --> 00:07:40,580
‫Par exemple, disons que, comme je l'ai déjà mentionné, nous avions

145
00:07:40,580 --> 00:07:45,580
‫notre API à l'API. natours. com, mais ensuite

146
00:07:46,020 --> 00:07:50,290
‫notre application frontale chez natours. com.

147
00:07:50,290 --> 00:07:52,210
‫Et donc dans ce cas, tout ce

148
00:07:52,210 --> 00:07:56,290
‫que nous voulons qu'il fasse, c'est d'autoriser l'accès à partir de cette origine ici, en gros.

149
00:07:56,290 --> 00:08:01,290
‫Et donc dans ce cas, nous utiliserions app. use, puis CORS, puis

150
00:08:01,700 --> 00:08:06,700
‫passez un objet pour les options où nous

151
00:08:06,719 --> 00:08:08,720
‫spécifierions l'origine, disons

152
00:08:11,320 --> 00:08:16,320
‫HTTPS://www. natours. com.

153
00:08:19,547 --> 00:08:21,560
‫Et ce n'est donc qu'un exemple

154
00:08:21,560 --> 00:08:26,560
‫au cas où nous aurions notre front-end chez natours. com, d'accord?

155
00:08:28,870 --> 00:08:31,510
‫Et encore une fois, avec cela, nous autoriserions

156
00:08:31,510 --> 00:08:34,210
‫uniquement cette URL, donc cette origine, pour créer

157
00:08:34,210 --> 00:08:39,142
‫des requêtes à l'API. natours. com.

158
00:08:39,142 --> 00:08:42,070
‫Et bien sûr, nous pourrions également permettre d'autres origines.

159
00:08:42,070 --> 00:08:44,400
‫Par exemple, uniquement pour certains sites

160
00:08:44,400 --> 00:08:46,770
‫Web spécifiques que nous souhaitons autoriser, d'accord ?

161
00:08:46,770 --> 00:08:50,690
‫Mais encore une fois, dans ce cas, nous voulons vraiment permettre à tout le monde.

162
00:08:50,690 --> 00:08:54,560
‫D'accord, c'était donc la première partie de l'activation de CORS, mais

163
00:08:54,560 --> 00:08:56,940
‫en fait ce n'est pas tout, car

164
00:08:56,940 --> 00:08:59,160
‫pour le moment, cela ne

165
00:08:59,160 --> 00:09:01,410
‫fonctionnera que pour les requêtes dites simples.

166
00:09:01,410 --> 00:09:05,280
‫Et les requêtes simples sont des requêtes get et post.

167
00:09:05,280 --> 00:09:08,770
‫En revanche, nous avons des demandes dites non simples.

168
00:09:08,770 --> 00:09:12,300
‫Et ce sont des demandes de mise, de correctif et de

169
00:09:12,300 --> 00:09:14,840
‫suppression, ou également des demandes qui envoient des

170
00:09:14,840 --> 00:09:17,210
‫cookies ou utilisent des en-têtes non standard.

171
00:09:17,210 --> 00:09:19,240
‫Et ces demandes non simples,

172
00:09:19,240 --> 00:09:22,490
‫elles nécessitent une phase dite de contrôle en amont.

173
00:09:22,490 --> 00:09:25,520
‫Ainsi, à chaque fois qu'il y a une requête non

174
00:09:25,520 --> 00:09:27,910
‫simple, le navigateur émet alors automatiquement la

175
00:09:27,910 --> 00:09:31,370
‫phase de contrôle en amont, et c'est ainsi que cela fonctionne.

176
00:09:31,370 --> 00:09:34,240
‫Ainsi, avant que la vraie demande ne se

177
00:09:34,240 --> 00:09:36,480
‫produise, et disons une demande de

178
00:09:36,480 --> 00:09:39,640
‫suppression, le navigateur fait d'abord une demande d'options afin

179
00:09:39,640 --> 00:09:42,400
‫de déterminer si la demande réelle peut être

180
00:09:42,400 --> 00:09:44,150
‫envoyée en toute sécurité.

181
00:09:44,150 --> 00:09:46,410
‫Et donc ce que cela signifie pour

182
00:09:46,410 --> 00:09:49,410
‫nous, les développeurs, c'est que sur notre serveur, nous devons

183
00:09:49,410 --> 00:09:51,420
‫réellement répondre à cette demande d'options.

184
00:09:51,420 --> 00:09:54,860
‫Et les options ne sont en réalité qu'une

185
00:09:54,860 --> 00:09:59,110
‫autre méthode HTTP, donc tout comme get, post ou delete, d'accord ?

186
00:09:59,110 --> 00:10:02,530
‫Donc, fondamentalement, lorsque nous recevons l'une de ces

187
00:10:02,530 --> 00:10:05,080
‫demandes d'options sur notre serveur,

188
00:10:05,080 --> 00:10:08,120
‫nous devons ensuite renvoyer le même en-tête Access-Control-Allow-Origin.

189
00:10:08,120 --> 00:10:10,430
‫Et de cette façon, le navigateur saura

190
00:10:10,430 --> 00:10:11,930
‫alors que la

191
00:10:11,930 --> 00:10:15,520
‫demande réelle, et dans ce cas la demande de suppression, peut

192
00:10:15,520 --> 00:10:20,070
‫être exécutée en toute sécurité, puis exécute la demande de suppression elle-même, d'accord ?

193
00:10:20,070 --> 00:10:24,513
‫Alors faisons-le et disons app. option.

194
00:10:26,130 --> 00:10:29,200
‫D'accord, et encore une fois, c'est très similaire à faire

195
00:10:29,200 --> 00:10:34,200
‫une application. obtenir par exemple, ou . Publier, . effacer, . patch, et

196
00:10:35,430 --> 00:10:37,850
‫tous ces verbes que vous connaissez déjà.

197
00:10:37,850 --> 00:10:42,490
‫Alors . options n'est pas de définir des options sur

198
00:10:42,490 --> 00:10:46,490
‫notre application, c'est vraiment juste une autre méthode HTTP à laquelle nous pouvons répondre.

199
00:10:46,490 --> 00:10:49,670
‫Et encore une fois, dans ce cas, nous devons y répondre

200
00:10:49,670 --> 00:10:52,010
‫car le navigateur envoie une demande d'option

201
00:10:52,010 --> 00:10:54,630
‫lorsqu'il y a une phase de contrôle en amont.

202
00:10:54,630 --> 00:10:56,520
‫Nous devons donc définir

203
00:10:56,520 --> 00:10:59,630
‫la route pour laquelle nous voulons gérer les options.

204
00:10:59,630 --> 00:11:04,630
‫Et encore une fois, nous le ferons sur toutes les routes, d'accord ?

205
00:11:04,920 --> 00:11:07,270
‫Et puis, en gros, le

206
00:11:07,270 --> 00:11:11,653
‫gestionnaire, qui est encore une fois le middleware CORS, d'accord ?

207
00:11:12,610 --> 00:11:15,370
‫Et encore une fois, nous ne pouvions bien

208
00:11:15,370 --> 00:11:18,810
‫sûr autoriser ces requêtes complexes que sur un itinéraire spécifique.

209
00:11:18,810 --> 00:11:22,630
‫Par exemple l'application. options,

210
00:11:22,630 --> 00:11:27,630
‫et disons uniquement sur api/v1/tours/:id,

211
00:11:31,110 --> 00:11:34,340
‫comme ça, d'accord ?

212
00:11:34,340 --> 00:11:37,730
‫Supposons donc que quelqu'un fasse une demande de suppression ou de correctif pour

213
00:11:37,730 --> 00:11:39,840
‫l'une des tournées, et seulement là, nous autorisons

214
00:11:39,840 --> 00:11:41,890
‫une phase de contrôle en amont.

215
00:11:41,890 --> 00:11:44,340
‫Et donc fondamentalement, uniquement sur cette

216
00:11:44,340 --> 00:11:47,680
‫route ici, une de ces requêtes complexes peut être effectuée.

217
00:11:47,680 --> 00:11:51,840
‫Donc, dans ce cas où nous n'avions que cet itinéraire d'options, seules les

218
00:11:51,840 --> 00:11:54,150
‫tournées pouvaient être supprimées ou corrigées

219
00:11:54,150 --> 00:11:56,820
‫à partir d'une requête cross-origin, n'est-ce pas ?

220
00:11:56,820 --> 00:11:59,870
‫Et aucune de nos autres ressources, d'accord ?

221
00:11:59,870 --> 00:12:04,000
‫Mais encore une fois, permettons-les tous, d'accord ?

222
00:12:04,000 --> 00:12:07,960
‫Mais je vais quand même vous laisser cela ici à titre d'exemple.

223
00:12:07,960 --> 00:12:11,550
‫Bon, de toute façon, c'est tout ce que nous avons vraiment

224
00:12:11,550 --> 00:12:14,410
‫à faire pour activer CORS pour notre application.

225
00:12:14,410 --> 00:12:17,030
‫Et donc redéployons maintenant l'application en la

226
00:12:17,030 --> 00:12:19,620
‫poussant à nouveau vers Heroku.

227
00:12:19,620 --> 00:12:23,010
‫Mais avant de faire cela, je veux en fait changer quelque chose

228
00:12:23,010 --> 00:12:25,520
‫ici dans notre paquet. json.

229
00:12:25,520 --> 00:12:28,010
‫Et c'est ce moteur de nœud ici.

230
00:12:28,010 --> 00:12:30,380
‫Donc, parfois, cela peut créer des

231
00:12:30,380 --> 00:12:33,220
‫problèmes lorsque nous spécifions la version comme celle-ci.

232
00:12:33,220 --> 00:12:35,770
‫Donc, en gros, autoriser l'installation de versions

233
00:12:35,770 --> 00:12:37,400
‫supérieures à la version que

234
00:12:37,400 --> 00:12:38,930
‫nous exécutons actuellement.

235
00:12:38,930 --> 00:12:40,540
‫Et donc ce que je

236
00:12:40,540 --> 00:12:43,700
‫veux faire ici, c'est dire qu'il ne devrait installer que la version

237
00:12:43,700 --> 00:12:45,493
‫10, et non une version après cela.

238
00:12:46,560 --> 00:12:50,970
‫Je le fais donc en disant ce symbole caret ici, puis

239
00:12:50,970 --> 00:12:52,470
‫la version 10.

240
00:12:52,470 --> 00:12:55,990
‫Et donc encore une fois, cela utilise le versioning sémantique,

241
00:12:55,990 --> 00:12:57,770
‫et donc comme ici.

242
00:12:57,770 --> 00:13:00,610
‫Ce qui, rappelons-le, signifie que NPM est

243
00:13:00,610 --> 00:13:04,390
‫autorisé à installer l'une de ces sous-versions ou versions de

244
00:13:04,390 --> 00:13:08,070
‫correctif, mais pas à passer à la prochaine version majeure.

245
00:13:08,070 --> 00:13:10,760
‫Et donc ici ce que je fais est le même, d'accord ?

246
00:13:10,760 --> 00:13:14,350
‫Donc, j'exécute actuellement quelque chose de Node version 10, et vous

247
00:13:14,350 --> 00:13:19,070
‫pouvez donc confirmer le vôtre en tapant node -v, et vous voyez donc que

248
00:13:19,070 --> 00:13:22,060
‫je suis sur 10. 11 en ce moment.

249
00:13:22,060 --> 00:13:24,270
‫Mais probablement quand vous regardez ce

250
00:13:24,270 --> 00:13:29,250
‫cours, vous allez être au moins à la version 12, peut-être même 14 ou 16, selon

251
00:13:29,250 --> 00:13:32,510
‫combien de temps vous êtes dans le futur, d'accord ?

252
00:13:32,510 --> 00:13:33,860
‫Et ne vous inquiétez pas, bien

253
00:13:33,860 --> 00:13:36,240
‫sûr, tout ce que je vous montre ici dans le

254
00:13:36,240 --> 00:13:37,550
‫cours devrait toujours fonctionner

255
00:13:37,550 --> 00:13:40,010
‫correctement quelle que soit la version de Node que vous utilisez.

256
00:13:40,010 --> 00:13:42,030
‫Donc, si vous utilisez la

257
00:13:42,030 --> 00:13:46,900
‫version 12, alors s'il vous plaît allez-y et mettez le 12 ici, d'accord ?

258
00:13:46,900 --> 00:13:51,170
‫Quoi qu'il en soit, ajoutons maintenant tous les

259
00:13:51,170 --> 00:13:56,163
‫fichiers modifiés à la zone de transit, donc git add all.

260
00:13:58,300 --> 00:14:02,053
‫Et puis engagez-les avec un message significatif, donc mis

261
00:14:03,670 --> 00:14:05,260
‫en œuvre CORS.

262
00:14:08,707 --> 00:14:11,120
‫Et puis poussez le maître Heroku.

263
00:14:14,390 --> 00:14:16,200
‫Et maintenant, cela prend un certain

264
00:14:16,200 --> 00:14:18,453
‫temps, alors je vous verrai quand ce sera fait.

265
00:14:21,950 --> 00:14:25,640
‫L'application est donc déployée avec succès maintenant, rechargeons-la rapidement

266
00:14:25,640 --> 00:14:28,230
‫ici juste pour voir si

267
00:14:29,100 --> 00:14:32,550
‫elle fonctionne toujours, et c'est effectivement le cas.

268
00:14:32,550 --> 00:14:37,190
‫Et maintenant, pour vous prouver que cela fonctionne différemment avec CORS, si nous

269
00:14:37,190 --> 00:14:38,970
‫renouvelons cette demande ici,

270
00:14:38,970 --> 00:14:41,720
‫cela devrait alors fonctionner, n'est-ce pas ?

271
00:14:41,720 --> 00:14:45,170
‫Alors essayons ça, et c'est parti.

272
00:14:45,170 --> 00:14:48,233
‫Pas d'erreur cette fois, vérifions x ici.

273
00:14:49,750 --> 00:14:53,740
‫Et effectivement, on dirait qu'il y a quelque chose ici.

274
00:14:53,740 --> 00:14:57,150
‫Donc vous voyez qu'en fait la réponse est de type CORS,

275
00:14:57,150 --> 00:15:01,053
‫nous avons nos en-têtes, eh bien, je ne peux pas vraiment les voir ici.

276
00:15:01,920 --> 00:15:04,010
‫Cela n'a pas d'importance, ici nous avons aussi

277
00:15:04,010 --> 00:15:05,690
‫juste une chaîne lisible, mais

278
00:15:05,690 --> 00:15:08,070
‫encore une fois ce n'est pas important du tout.

279
00:15:08,070 --> 00:15:10,450
‫Ce qui compte ici, c'est

280
00:15:10,450 --> 00:15:15,450
‫que maintenant nous sommes capables d'effectuer des requêtes cross-origin, donc c'est fantastique.

281
00:15:15,800 --> 00:15:19,130
‫Maintenant, permettez-moi de vous montrer également les en-têtes

282
00:15:19,130 --> 00:15:21,260
‫réels que le package

283
00:15:21,260 --> 00:15:25,610
‫CORS ajoute en effectuant simplement une requête ici dans Postman.

284
00:15:25,610 --> 00:15:28,513
‫Donc en production, envoyons-le maintenant.

285
00:15:31,540 --> 00:15:34,240
‫Et donc ici, vous voyez

286
00:15:34,240 --> 00:15:37,690
‫dans les en-têtes de réponse que nous

287
00:15:37,690 --> 00:15:41,960
‫avons en fait cet Access-Control-Allow-Origin défini sur tout, d'accord, super.

288
00:15:41,960 --> 00:15:45,000
‫Et c'est ainsi que vous implémentez réellement le partage

289
00:15:45,000 --> 00:15:47,993
‫de ressources cross-origin dans votre propre application.