1
00:00:01,210 --> 00:00:03,330
‫Jonas: En esta conferencia

2
00:00:03,330 --> 00:00:08,020
‫implementaremos algo llamado CORS, que significa intercambio de recursos de origen cruzado.

3
00:00:08,020 --> 00:00:11,670
‫Y esta es una característica fundamental en cualquier API, pero

4
00:00:11,670 --> 00:00:13,400
‫solo puedo mostrarte esto

5
00:00:13,400 --> 00:00:16,183
‫ahora que la aplicación ya está implementada.

6
00:00:17,900 --> 00:00:21,610
‫Ahora bien, ¿qué es realmente el intercambio de recursos entre

7
00:00:21,610 --> 00:00:24,170
‫orígenes y por qué debemos implementarlo?

8
00:00:24,170 --> 00:00:26,610
‫Bueno, digamos que tenemos nuestra API

9
00:00:26,610 --> 00:00:31,610
‫aquí en natours-jonas. herokuapp. com / api / v1,

10
00:00:34,570 --> 00:00:36,180
‫y así sucesivamente.

11
00:00:36,180 --> 00:00:40,393
‫Y luego algún otro sitio web, por ejemplo, por ejemplo. com, está intentando

12
00:00:41,860 --> 00:00:44,380
‫acceder a nuestra API.

13
00:00:44,380 --> 00:00:48,470
‫Básicamente, estoy tratando de llamar a esta URL aquí.

14
00:00:48,470 --> 00:00:51,730
‫Y esto se denomina solicitud de origen

15
00:00:51,730 --> 00:00:54,940
‫cruzado, porque herokuapp. com es un dominio diferente

16
00:00:54,940 --> 00:00:58,550
‫al ejemplo. com y, por lo tanto, if example. com está

17
00:00:58,550 --> 00:01:01,570
‫intentando acceder a herokuapp. com, será

18
00:01:01,570 --> 00:01:05,520
‫una solicitud de origen cruzado, ¿de acuerdo?

19
00:01:05,520 --> 00:01:09,160
‫Ahora, por lo general, las solicitudes de origen cruzado no están

20
00:01:09,160 --> 00:01:13,290
‫permitidas y, de forma predeterminada, fallarán, a menos que implementemos CORS, por

21
00:01:13,290 --> 00:01:16,660
‫lo que el intercambio de recursos de origen cruzado.

22
00:01:16,660 --> 00:01:20,660
‫Y dado que queremos que nuestra API

23
00:01:20,660 --> 00:01:25,240
‫esté disponible para todos, definitivamente necesitamos implementar eso, ¿de acuerdo?

24
00:01:25,240 --> 00:01:27,933
‫Ahora déjame mostrarte cómo fallaría esto.

25
00:01:28,800 --> 00:01:31,073
‫Así que tomemos esta

26
00:01:31,920 --> 00:01:35,743
‫URL aquí, abramos en su pestaña y luego inspeccionemos.

27
00:01:36,770 --> 00:01:41,320
‫Entonces, básicamente, hagamos una solicitud HTTP a nuestra API aquí desde

28
00:01:41,320 --> 00:01:43,540
‫la consola, ¿de acuerdo?

29
00:01:43,540 --> 00:01:45,840
‫Porque básicamente cuando lo hagamos desde

30
00:01:45,840 --> 00:01:48,273
‫aquí, también será una solicitud de origen cruzado.

31
00:01:49,260 --> 00:01:53,440
‫Entonces, digamos que const x es igual a await,

32
00:01:53,440 --> 00:01:58,100
‫y luego usemos la función de recuperación de JavaScript, ¿de acuerdo?

33
00:01:58,100 --> 00:02:00,050
‫Así que buscar es básicamente

34
00:02:00,050 --> 00:02:02,600
‫una función que es un poco similar a

35
00:02:02,600 --> 00:02:04,640
‫la biblioteca Axios que usamos en

36
00:02:04,640 --> 00:02:07,080
‫nuestro código, pero es JavaScript nativo en el

37
00:02:07,080 --> 00:02:10,100
‫navegador, por lo que podemos usarlo aquí en la consola.

38
00:02:10,100 --> 00:02:12,900
‫Entonces, digamos que queremos hacer una

39
00:02:12,900 --> 00:02:17,460
‫solicitud a nuestra API de tours como esta, ¿de acuerdo?

40
00:02:17,460 --> 00:02:20,870
‫Entonces, si intentamos esto ahora, veamos qué obtenemos.

41
00:02:20,870 --> 00:02:22,480
‫Y de hecho obtenemos

42
00:02:22,480 --> 00:02:24,990
‫el error de que intentar acceder a

43
00:02:24,990 --> 00:02:29,900
‫esta ruta aquí desde este otro origen ha sido bloqueado por la política CORS.

44
00:02:29,900 --> 00:02:32,350
‫Y eso es exactamente lo que dije antes.

45
00:02:32,350 --> 00:02:35,320
‫De modo que, de forma predeterminada, siempre se bloqueará

46
00:02:35,320 --> 00:02:37,250
‫una solicitud de origen cruzado.

47
00:02:37,250 --> 00:02:40,270
‫Por cierto, esto solo se aplica a las solicitudes

48
00:02:40,270 --> 00:02:41,880
‫realizadas desde el navegador.

49
00:02:41,880 --> 00:02:44,990
‫Por ejemplo, usando la API de búsqueda aquí, o

50
00:02:44,990 --> 00:02:47,260
‫algo como la biblioteca Axios que

51
00:02:47,260 --> 00:02:49,010
‫usamos en nuestro código.

52
00:02:49,010 --> 00:02:51,210
‫Y eso significa que desde

53
00:02:51,210 --> 00:02:54,500
‫el servidor, siempre podremos realizar solicitudes de origen cruzado

54
00:02:54,500 --> 00:02:55,920
‫sin ningún problema.

55
00:02:55,920 --> 00:02:58,620
‫Así que no hay restricciones en el

56
00:02:58,620 --> 00:03:00,500
‫servidor, sino solo en

57
00:03:00,500 --> 00:03:03,080
‫el navegador, básicamente por razones de seguridad.

58
00:03:03,080 --> 00:03:06,680
‫Ah, y también para que se considere origen cruzado, una

59
00:03:06,680 --> 00:03:09,440
‫solicitud puede provenir de un dominio diferente.

60
00:03:09,440 --> 00:03:12,020
‫Entonces, tal como vimos en nuestro primer ejemplo

61
00:03:12,020 --> 00:03:15,160
‫aquí, pero también un subdominio diferente, un protocolo diferente

62
00:03:15,160 --> 00:03:17,650
‫o incluso un puerto diferente se considera

63
00:03:17,650 --> 00:03:19,950
‫una solicitud de origen cruzado.

64
00:03:19,950 --> 00:03:24,950
‫Entonces, por ejemplo, si tuviéramos API. natours. com para nuestra API,

65
00:03:27,100 --> 00:03:31,480
‫y luego haría una solicitud de natours. com, eso también

66
00:03:31,480 --> 00:03:34,650
‫se consideraría una solicitud de origen

67
00:03:34,650 --> 00:03:37,200
‫cruzado y fallaría, ¿de acuerdo?

68
00:03:37,200 --> 00:03:39,950
‫Pero nuevamente, dado que queremos permitir que otros

69
00:03:39,950 --> 00:03:42,410
‫sitios web accedan básicamente a nuestra

70
00:03:42,410 --> 00:03:45,423
‫API, ahora implementemos el intercambio de recursos entre orígenes.

71
00:03:46,680 --> 00:03:49,620
‫Muy bien, y lo hacemos una vez más

72
00:03:49,620 --> 00:03:51,653
‫instalando un paquete NPM.

73
00:03:53,130 --> 00:03:55,940
‫Entonces NPM instale, y simplemente CORS.

74
00:03:57,770 --> 00:03:59,933
‫Entonces aquí necesitamos ese paquete.

75
00:04:08,140 --> 00:04:10,450
‫Y una vez más, este CORS

76
00:04:10,450 --> 00:04:12,480
‫aquí es una función

77
00:04:12,480 --> 00:04:17,480
‫de middleware muy simple que ahora necesitamos usar para nuestra aplicación, ¿de acuerdo?

78
00:04:17,580 --> 00:04:20,250
‫Así que hagamos eso aquí, ¿y por qué no hacerlo aquí

79
00:04:20,250 --> 00:04:21,533
‫en la parte superior?

80
00:04:22,980 --> 00:04:25,930
‫Digamos que implemente CORS.

81
00:04:28,240 --> 00:04:32,380
‫Y así app. use, y luego llame a CORS,

82
00:04:32,380 --> 00:04:35,270
‫que a su vez devolverá una función de middleware

83
00:04:35,270 --> 00:04:37,860
‫que luego agregará un par de encabezados

84
00:04:37,860 --> 00:04:39,580
‫diferentes a nuestra respuesta.

85
00:04:39,580 --> 00:04:41,870
‫Y dado que toda esta función de middleware

86
00:04:41,870 --> 00:04:44,820
‫aquí es básicamente agregar algunos encabezados específicos, tal vez esté

87
00:04:44,820 --> 00:04:46,767
‫pensando "¿Por qué estamos usando" otro

88
00:04:46,767 --> 00:04:49,060
‫paquete de NPM? "Bueno, echemos

89
00:04:49,060 --> 00:04:51,240
‫un vistazo al código

90
00:04:51,240 --> 00:04:52,853
‫de este paquete.

91
00:04:55,370 --> 00:04:58,820
‫Entonces, GitHub CORS, una vez más, así

92
00:04:58,820 --> 00:05:02,490
‫es como encuentro la documentación o el código

93
00:05:02,490 --> 00:05:05,610
‫fuente en sí para mis paquetes.

94
00:05:05,610 --> 00:05:08,730
‫Y entonces vayamos aquí a lib, que

95
00:05:08,730 --> 00:05:10,793
‫generalmente significa biblioteca.

96
00:05:11,870 --> 00:05:15,960
‫Y luego todo lo que realmente tenemos aquí es este índice. js.

97
00:05:15,960 --> 00:05:20,020
‫Y entonces ves que aquí está todo el código, y

98
00:05:20,020 --> 00:05:21,500
‫básicamente lo que

99
00:05:21,500 --> 00:05:24,730
‫ves aquí es que simplemente agrega este encabezado

100
00:05:24,730 --> 00:05:28,653
‫aquí con el valor de básicamente todo a los encabezados.

101
00:05:29,850 --> 00:05:33,740
‫Muy bien, entonces tiene un par de

102
00:05:33,740 --> 00:05:37,320
‫otros encabezados, Access-Control-Allow-Methods, allow-credentials, y eso

103
00:05:37,320 --> 00:05:40,003
‫es para diferentes casos.

104
00:05:40,900 --> 00:05:42,800
‫Está bien, pero para que vea

105
00:05:42,800 --> 00:05:45,010
‫que en realidad todo se trata de encabezados aquí.

106
00:05:45,010 --> 00:05:49,000
‫Así que sí, tal vez podríamos agregar estos encabezados por nosotros

107
00:05:49,000 --> 00:05:51,430
‫mismos, pero ¿por qué haríamos eso?

108
00:05:51,430 --> 00:05:52,810
‫Quiero decir que podríamos,

109
00:05:52,810 --> 00:05:56,260
‫por supuesto, para comprender completamente cómo funciona, pero

110
00:05:56,260 --> 00:05:58,790
‫en Node. js y

111
00:05:58,790 --> 00:06:01,010
‫desarrollo Express, en el entorno real

112
00:06:01,010 --> 00:06:03,440
‫normalmente no querrá reinventar la rueda y,

113
00:06:03,440 --> 00:06:05,340
‫en su lugar, siempre que

114
00:06:05,340 --> 00:06:08,810
‫pueda, utilice paquetes que otros desarrolladores hayan escrito para nosotros.

115
00:06:08,810 --> 00:06:12,110
‫Así que realmente nos enfocamos en hacer que nuestra aplicación

116
00:06:12,110 --> 00:06:14,740
‫funcione, en lugar de reescribir el código

117
00:06:14,740 --> 00:06:17,750
‫que otros desarrolladores ya han escrito para nosotros, ¿de acuerdo?

118
00:06:17,750 --> 00:06:20,070
‫Entonces, podemos echar un

119
00:06:20,070 --> 00:06:23,930
‫vistazo a todo esto, pero como mencioné, también podemos

120
00:06:23,930 --> 00:06:27,110
‫seguir adelante y usar esto, ¿de acuerdo?

121
00:06:27,110 --> 00:06:31,190
‫De todos modos, así es como habilitamos el uso compartido de recursos entre orígenes

122
00:06:31,190 --> 00:06:32,890
‫para todas las solicitudes entrantes.

123
00:06:32,890 --> 00:06:35,560
‫Básicamente para toda nuestra API.

124
00:06:35,560 --> 00:06:37,950
‫Pero digamos que solo queremos habilitar CORS

125
00:06:37,950 --> 00:06:39,490
‫en una ruta específica.

126
00:06:39,490 --> 00:06:43,253
‫Así que podríamos usar eso también, así que copiemos esto.

127
00:06:44,310 --> 00:06:48,250
‫Entonces, si solo quisiéramos habilitar CORS, digamos en los

128
00:06:48,250 --> 00:06:50,360
‫recorridos, bueno, podríamos simplemente

129
00:06:50,360 --> 00:06:53,930
‫agregar eso aquí en esta pila de middleware.

130
00:06:53,930 --> 00:06:56,930
‫Está bien, pero de nuevo en este caso

131
00:06:56,930 --> 00:06:59,233
‫realmente queremos permitirlo en todas partes.

132
00:07:00,210 --> 00:07:03,400
‫Entonces, como vimos anteriormente en el código

133
00:07:03,400 --> 00:07:04,980
‫de GitHub,

134
00:07:04,980 --> 00:07:09,980
‫lo que hace es configurar el encabezado Access-Control-Allow-Origin en todo.

135
00:07:14,120 --> 00:07:16,040
‫Entonces, lo que significa todo

136
00:07:16,040 --> 00:07:19,670
‫esto aquí es para todas las solicitudes, sin importar de dónde provengan.

137
00:07:19,670 --> 00:07:22,350
‫Y esto es ideal para permitir que

138
00:07:22,350 --> 00:07:24,380
‫todos consuman nuestra API.

139
00:07:24,380 --> 00:07:25,940
‫Pero ahora imagine el

140
00:07:25,940 --> 00:07:28,440
‫caso en el que no queremos compartir

141
00:07:28,440 --> 00:07:31,590
‫nuestra API, pero queremos poder tener la API en un

142
00:07:31,590 --> 00:07:33,960
‫dominio, o incluso en un subdominio, y

143
00:07:33,960 --> 00:07:36,760
‫luego tener nuestra aplicación front-end en un dominio diferente.

144
00:07:36,760 --> 00:07:40,580
‫Por ejemplo, digamos, como mencioné antes, teníamos nuestra

145
00:07:40,580 --> 00:07:45,580
‫API en API. natours. com, pero luego

146
00:07:46,020 --> 00:07:50,290
‫nuestra aplicación front-end en natours. com.

147
00:07:50,290 --> 00:07:52,210
‫Entonces, en ese caso, todo lo

148
00:07:52,210 --> 00:07:56,290
‫que queremos que haga es permitir el acceso desde este origen aquí, básicamente.

149
00:07:56,290 --> 00:08:01,290
‫Y en ese caso usaríamos app. use, y luego CORS, y

150
00:08:01,700 --> 00:08:06,700
‫luego pase un objeto para las opciones donde especificaríamos el

151
00:08:06,719 --> 00:08:08,720
‫origen para decir HTTPS:

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

153
00:08:19,547 --> 00:08:21,560
‫Y este es solo un ejemplo

154
00:08:21,560 --> 00:08:26,560
‫en caso de que tuviéramos nuestro front-end en natours. com, ¿de acuerdo?

155
00:08:28,870 --> 00:08:31,510
‫Y así, de nuevo, con esto solo permitiríamos

156
00:08:31,510 --> 00:08:34,210
‫esta URL básicamente, entonces este origen, para crear

157
00:08:34,210 --> 00:08:39,142
‫solicitudes a la API. natours. com.

158
00:08:39,142 --> 00:08:42,070
‫Y por supuesto también podríamos permitir otros orígenes.

159
00:08:42,070 --> 00:08:44,400
‫Por ejemplo, solo para algunos sitios

160
00:08:44,400 --> 00:08:46,770
‫web específicos que queremos que permita, ¿de acuerdo?

161
00:08:46,770 --> 00:08:50,690
‫Pero nuevamente, en este caso realmente queremos permitir que todos.

162
00:08:50,690 --> 00:08:54,560
‫Bien, esta fue la primera parte de habilitar CORS, pero en

163
00:08:54,560 --> 00:08:56,940
‫realidad eso no es todo, porque

164
00:08:56,940 --> 00:08:59,160
‫en este momento esto solo

165
00:08:59,160 --> 00:09:01,410
‫funcionará para las llamadas solicitudes simples.

166
00:09:01,410 --> 00:09:05,280
‫Y las solicitudes simples son solicitudes de obtención y publicación.

167
00:09:05,280 --> 00:09:08,770
‫Por otro lado, tenemos las llamadas solicitudes no simples.

168
00:09:08,770 --> 00:09:12,300
‫Y estos son solicitudes de colocación, parche y eliminación,

169
00:09:12,300 --> 00:09:14,840
‫o también solicitudes que envían cookies

170
00:09:14,840 --> 00:09:17,210
‫o usan encabezados no estándar.

171
00:09:17,210 --> 00:09:19,240
‫Y estas solicitudes no

172
00:09:19,240 --> 00:09:22,490
‫simples, requieren una fase de verificación previa.

173
00:09:22,490 --> 00:09:25,520
‫Entonces, siempre que haya una solicitud no simple,

174
00:09:25,520 --> 00:09:27,910
‫el navegador emitirá automáticamente la

175
00:09:27,910 --> 00:09:31,370
‫fase de verificación previa, y así es como funciona.

176
00:09:31,370 --> 00:09:34,240
‫Entonces, antes de que ocurra la solicitud real,

177
00:09:34,240 --> 00:09:36,480
‫y digamos una solicitud de eliminación,

178
00:09:36,480 --> 00:09:39,640
‫el navegador primero realiza una solicitud de opciones

179
00:09:39,640 --> 00:09:42,400
‫para determinar si la solicitud real es

180
00:09:42,400 --> 00:09:44,150
‫segura para enviar.

181
00:09:44,150 --> 00:09:46,410
‫Entonces, lo que eso significa para nosotros,

182
00:09:46,410 --> 00:09:49,410
‫los desarrolladores, es que en nuestro servidor debemos responder realmente

183
00:09:49,410 --> 00:09:51,420
‫a esa solicitud de opciones.

184
00:09:51,420 --> 00:09:54,860
‫Y las opciones son realmente solo otro método

185
00:09:54,860 --> 00:09:59,110
‫HTTP, así que como obtener, publicar o eliminar, ¿de acuerdo?

186
00:09:59,110 --> 00:10:02,530
‫Entonces, básicamente, cuando recibimos una de estas solicitudes

187
00:10:02,530 --> 00:10:05,080
‫de opciones en nuestro servidor,

188
00:10:05,080 --> 00:10:08,120
‫necesitamos enviar el mismo encabezado Access-Control-Allow-Origin.

189
00:10:08,120 --> 00:10:10,430
‫Y de esta manera, el navegador

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

191
00:10:11,930 --> 00:10:15,520
‫solicitud real, y en este caso la solicitud de eliminación,

192
00:10:15,520 --> 00:10:20,070
‫es segura de realizar, y luego ejecutará la solicitud de eliminación, ¿de acuerdo?

193
00:10:20,070 --> 00:10:24,513
‫Así que hagamos eso y digamos aplicación. opciones.

194
00:10:26,130 --> 00:10:29,200
‫De acuerdo, y de nuevo, esto es muy similar a

195
00:10:29,200 --> 00:10:34,200
‫hacer una aplicación. obtener, por ejemplo, o. correo, . Eliminar, . patch, y

196
00:10:35,430 --> 00:10:37,850
‫todos estos verbos que ya conoces.

197
00:10:37,850 --> 00:10:42,490
‫Tan . options no es establecer ninguna opción en

198
00:10:42,490 --> 00:10:46,490
‫nuestra aplicación, en realidad es solo otro método HTTP al que podemos responder.

199
00:10:46,490 --> 00:10:49,670
‫Y nuevamente, en este caso debemos responder porque el

200
00:10:49,670 --> 00:10:52,010
‫navegador envía una solicitud de opción

201
00:10:52,010 --> 00:10:54,630
‫cuando hay una fase de verificación previa.

202
00:10:54,630 --> 00:10:56,520
‫Entonces, necesitamos definir la

203
00:10:56,520 --> 00:10:59,630
‫ruta para la que queremos manejar las opciones.

204
00:10:59,630 --> 00:11:04,630
‫Y una vez más, haremos esto en todas las rutas, ¿de acuerdo?

205
00:11:04,920 --> 00:11:07,270
‫Y luego, básicamente, el controlador,

206
00:11:07,270 --> 00:11:11,653
‫que una vez más es el middleware CORS, ¿de acuerdo?

207
00:11:12,610 --> 00:11:15,370
‫Y una vez más, por supuesto, solo

208
00:11:15,370 --> 00:11:18,810
‫podríamos permitir estas solicitudes complejas en una ruta específica.

209
00:11:18,810 --> 00:11:22,630
‫Por ejemplo, app. opciones, y

210
00:11:22,630 --> 00:11:27,630
‫digamos solo en api / v1 / tours

211
00:11:31,110 --> 00:11:34,340
‫/: id, así, ¿de acuerdo?

212
00:11:34,340 --> 00:11:37,730
‫Entonces, digamos que alguien hace una eliminación o una solicitud de parche

213
00:11:37,730 --> 00:11:39,840
‫para uno de los recorridos, y solo allí

214
00:11:39,840 --> 00:11:41,890
‫permitimos una fase de verificación previa.

215
00:11:41,890 --> 00:11:44,340
‫Y, básicamente, solo en esta ruta

216
00:11:44,340 --> 00:11:47,680
‫aquí, se puede realizar una de estas solicitudes complejas.

217
00:11:47,680 --> 00:11:51,840
‫Entonces, en este caso aquí, donde solo teníamos esta ruta de opciones, solo

218
00:11:51,840 --> 00:11:54,150
‫los recorridos se podían eliminar o

219
00:11:54,150 --> 00:11:56,820
‫parchear desde una solicitud de origen cruzado, ¿verdad?

220
00:11:56,820 --> 00:11:59,870
‫Y ninguno de nuestros otros recursos, ¿de acuerdo?

221
00:11:59,870 --> 00:12:04,000
‫Pero una vez más, permitámoslos a todos, ¿de acuerdo?

222
00:12:04,000 --> 00:12:07,960
‫Pero todavía te dejaré esto aquí como ejemplo.

223
00:12:07,960 --> 00:12:11,550
‫Bien, de todos modos, eso es todo lo que realmente tenemos

224
00:12:11,550 --> 00:12:14,410
‫que hacer para habilitar CORS para nuestra aplicación.

225
00:12:14,410 --> 00:12:17,030
‫Entonces, ahora vuelva a implementar la

226
00:12:17,030 --> 00:12:19,620
‫aplicación empujándola nuevamente a Heroku.

227
00:12:19,620 --> 00:12:23,010
‫Pero antes de hacer eso, quiero cambiar algo aquí

228
00:12:23,010 --> 00:12:25,520
‫en nuestro paquete. json.

229
00:12:25,520 --> 00:12:28,010
‫Y ese es este motor de nodos aquí.

230
00:12:28,010 --> 00:12:30,380
‫Entonces, a veces puede crear algunos

231
00:12:30,380 --> 00:12:33,220
‫problemas cuando especificamos la versión de esta manera.

232
00:12:33,220 --> 00:12:35,770
‫Entonces, básicamente, permitir que se instalen versiones que

233
00:12:35,770 --> 00:12:37,400
‫son mayores que la versión

234
00:12:37,400 --> 00:12:38,930
‫que estamos ejecutando actualmente.

235
00:12:38,930 --> 00:12:40,540
‫Entonces, lo que quiero

236
00:12:40,540 --> 00:12:43,700
‫hacer aquí es decir que solo debería instalar la versión

237
00:12:43,700 --> 00:12:45,493
‫10, y no una versión posterior.

238
00:12:46,560 --> 00:12:50,970
‫Así que lo hago diciendo este símbolo de intercalación aquí, y luego

239
00:12:50,970 --> 00:12:52,470
‫la versión 10.

240
00:12:52,470 --> 00:12:55,990
‫Y una vez más, eso es usar el control de versiones

241
00:12:55,990 --> 00:12:57,770
‫semántico, y así como aquí.

242
00:12:57,770 --> 00:13:00,610
‫Lo que recuerde, significa que NPM

243
00:13:00,610 --> 00:13:04,390
‫puede instalar cualquiera de estas subversiones o versiones de

244
00:13:04,390 --> 00:13:08,070
‫parche, pero no pasar a la siguiente versión principal.

245
00:13:08,070 --> 00:13:10,760
‫Y aquí lo que estoy haciendo es lo mismo, ¿de acuerdo?

246
00:13:10,760 --> 00:13:14,350
‫Entonces, actualmente estoy ejecutando Node versión 10, y

247
00:13:14,350 --> 00:13:19,070
‫puedes confirmar el tuyo escribiendo node -v, y ves que estoy

248
00:13:19,070 --> 00:13:22,060
‫en 10. 11 ahora mismo.

249
00:13:22,060 --> 00:13:24,270
‫Pero probablemente cuando estés viendo este

250
00:13:24,270 --> 00:13:29,250
‫curso, tendrás al menos la versión 12, tal vez incluso la 14 o la 16,

251
00:13:29,250 --> 00:13:32,510
‫dependiendo de cuánto tiempo tengas en el futuro, ¿de acuerdo?

252
00:13:32,510 --> 00:13:33,860
‫Y no se preocupe, por

253
00:13:33,860 --> 00:13:36,240
‫supuesto, todo lo que le muestro aquí en el

254
00:13:36,240 --> 00:13:37,550
‫curso debería funcionar

255
00:13:37,550 --> 00:13:40,010
‫bien para cualquier versión de Node que esté usando.

256
00:13:40,010 --> 00:13:42,030
‫Entonces, si está usando

257
00:13:42,030 --> 00:13:46,900
‫la versión 12, entonces coloque la 12 aquí, ¿de acuerdo?

258
00:13:46,900 --> 00:13:51,170
‫De todos modos, ahora agreguemos todos los archivos

259
00:13:51,170 --> 00:13:56,163
‫modificados al área de preparación, así que git agrega todos.

260
00:13:58,300 --> 00:14:02,053
‫Y luego envíelos con un mensaje significativo, así

261
00:14:03,670 --> 00:14:05,260
‫que implementó CORS.

262
00:14:08,707 --> 00:14:11,120
‫Y luego consigue empujar al maestro de Heroku.

263
00:14:14,390 --> 00:14:16,200
‫Y ahora eso lleva algo de

264
00:14:16,200 --> 00:14:18,453
‫tiempo, así que te veré cuando esté listo.

265
00:14:21,950 --> 00:14:25,640
‫Entonces, la aplicación se implementó con éxito ahora, recarguemos

266
00:14:25,640 --> 00:14:28,230
‫rápidamente aquí solo para ver

267
00:14:29,100 --> 00:14:32,550
‫si todavía funciona, y de hecho lo está.

268
00:14:32,550 --> 00:14:37,190
‫Y ahora, para demostrarle que funciona de manera diferente con CORS,

269
00:14:37,190 --> 00:14:38,970
‫si hacemos esta

270
00:14:38,970 --> 00:14:41,720
‫solicitud aquí nuevamente, debería funcionar, ¿verdad?

271
00:14:41,720 --> 00:14:45,170
‫Intentémoslo, y aquí vamos.

272
00:14:45,170 --> 00:14:48,233
‫No hay error esta vez, marquemos x aquí.

273
00:14:49,750 --> 00:14:53,740
‫Y de hecho, parece que hay algo aquí.

274
00:14:53,740 --> 00:14:57,150
‫Entonces ves que en realidad la respuesta es de

275
00:14:57,150 --> 00:15:01,053
‫tipo CORS, tenemos nuestros encabezados, bueno, realmente no puedo verlos aquí.

276
00:15:01,920 --> 00:15:04,010
‫Eso no importa, aquí también tenemos solo

277
00:15:04,010 --> 00:15:05,690
‫una cadena legible, pero

278
00:15:05,690 --> 00:15:08,070
‫nuevamente eso no es importante en absoluto.

279
00:15:08,070 --> 00:15:10,450
‫Lo que importa aquí es

280
00:15:10,450 --> 00:15:15,450
‫que ahora podemos realizar solicitudes de origen cruzado, por lo que es fantástico.

281
00:15:15,800 --> 00:15:19,130
‫Ahora permítame mostrarle también los encabezados reales

282
00:15:19,130 --> 00:15:21,260
‫que agrega el

283
00:15:21,260 --> 00:15:25,610
‫paquete CORS simplemente haciendo una solicitud aquí en Postman.

284
00:15:25,610 --> 00:15:28,513
‫Entonces, en producción, enviémoslo ahora.

285
00:15:31,540 --> 00:15:34,240
‫Y aquí puede ver en

286
00:15:34,240 --> 00:15:37,690
‫los encabezados de respuesta que en realidad

287
00:15:37,690 --> 00:15:41,960
‫tenemos este Access-Control-Allow-Origin configurado para todo, está bien, genial.

288
00:15:41,960 --> 00:15:45,000
‫Y así es como realmente implementa el uso compartido de

289
00:15:45,000 --> 00:15:47,993
‫recursos de origen cruzado en su propia aplicación.