1 00:00:01,210 --> 00:00:03,330 ‫Jonas: In questa lezione 2 00:00:03,330 --> 00:00:08,020 ‫implementeremo qualcosa chiamato CORS, che significa condivisione di risorse tra le origini. 3 00:00:08,020 --> 00:00:11,670 ‫E questa è una caratteristica fondamentale in qualsiasi API, 4 00:00:11,670 --> 00:00:13,400 ‫ma posso mostrartelo solo 5 00:00:13,400 --> 00:00:16,183 ‫ora che l'applicazione è già effettivamente distribuita. 6 00:00:17,900 --> 00:00:21,610 ‫Ora, cos'è in realtà la condivisione delle risorse tra le 7 00:00:21,610 --> 00:00:24,170 ‫origini e perché è necessario implementarla? 8 00:00:24,170 --> 00:00:26,610 ‫Bene, diciamo che abbiamo la nostra 9 00:00:26,610 --> 00:00:31,610 ‫API qui a natours-jonas. herokuapp. com/api/v1, e così 10 00:00:34,570 --> 00:00:36,180 ‫via. 11 00:00:36,180 --> 00:00:40,393 ‫E poi qualche altro sito web, ad esempio ad esempio. com, sta cercando 12 00:00:41,860 --> 00:00:44,380 ‫di accedere alla nostra API. 13 00:00:44,380 --> 00:00:48,470 ‫Quindi fondamentalmente cercando di chiamare questo URL qui. 14 00:00:48,470 --> 00:00:51,730 ‫E questa viene quindi chiamata richiesta di origine 15 00:00:51,730 --> 00:00:54,940 ‫incrociata, perché herokuapp. com è un dominio diverso 16 00:00:54,940 --> 00:00:58,550 ‫da example. com, e quindi quindi se example. com sta cercando 17 00:00:58,550 --> 00:01:01,570 ‫di accedere a herokuapp. com, 18 00:01:01,570 --> 00:01:05,520 ‫sarà una richiesta multiorigine, ok? 19 00:01:05,520 --> 00:01:09,160 ‫Ora di solito le richieste tra le origini non sono 20 00:01:09,160 --> 00:01:13,290 ‫consentite e per impostazione predefinita falliranno, a meno che non implementiamo CORS, 21 00:01:13,290 --> 00:01:16,660 ‫quindi la condivisione delle risorse tra le origini. 22 00:01:16,660 --> 00:01:20,660 ‫E poiché vogliamo rendere la nostra 23 00:01:20,660 --> 00:01:25,240 ‫API disponibile a tutti, dobbiamo assolutamente implementarla, ok? 24 00:01:25,240 --> 00:01:27,933 ‫Ora lascia che ti mostri effettivamente come questo fallirebbe. 25 00:01:28,800 --> 00:01:31,073 ‫Quindi prendiamo questo URL 26 00:01:31,920 --> 00:01:35,743 ‫qui, lo apriamo nella tua scheda e poi controlliamo. 27 00:01:36,770 --> 00:01:41,320 ‫E quindi in pratica facciamo una richiesta HTTP alla nostra API 28 00:01:41,320 --> 00:01:43,540 ‫qui dalla console, ok? 29 00:01:43,540 --> 00:01:45,840 ‫Perché fondamentalmente quando lo faremo 30 00:01:45,840 --> 00:01:48,273 ‫da qui, sarà anche una richiesta cross-origine. 31 00:01:49,260 --> 00:01:53,440 ‫Quindi diciamo solo const x uguale wait, 32 00:01:53,440 --> 00:01:58,100 ‫e poi usiamo la funzione fetch JavaScript, va bene? 33 00:01:58,100 --> 00:02:00,050 ‫Quindi fetch è fondamentalmente 34 00:02:00,050 --> 00:02:02,600 ‫una funzione un po' simile alla libreria 35 00:02:02,600 --> 00:02:04,640 ‫Axios che abbiamo usato nel 36 00:02:04,640 --> 00:02:07,080 ‫nostro codice, ma è JavaScript nativo nel 37 00:02:07,080 --> 00:02:10,100 ‫browser, quindi possiamo semplicemente usarlo qui nella console. 38 00:02:10,100 --> 00:02:12,900 ‫Quindi diciamo che vogliamo fare una 39 00:02:12,900 --> 00:02:17,460 ‫richiesta alla nostra API dei tour in questo modo, va bene? 40 00:02:17,460 --> 00:02:20,870 ‫Quindi, se proviamo questo ora, vediamo cosa otteniamo. 41 00:02:20,870 --> 00:02:22,480 ‫E infatti otteniamo 42 00:02:22,480 --> 00:02:24,990 ‫l'errore che il tentativo di accedere a 43 00:02:24,990 --> 00:02:29,900 ‫questo percorso qui da quest'altra origine è stato bloccato dalla politica CORS. 44 00:02:29,900 --> 00:02:32,350 ‫E quindi è esattamente quello che ho detto prima. 45 00:02:32,350 --> 00:02:35,320 ‫In questo modo, per impostazione predefinita, una richiesta tra 46 00:02:35,320 --> 00:02:37,250 ‫le origini verrà sempre bloccata. 47 00:02:37,250 --> 00:02:40,270 ‫A proposito, questo vale solo per le richieste 48 00:02:40,270 --> 00:02:41,880 ‫effettuate dal browser. 49 00:02:41,880 --> 00:02:44,990 ‫Ad esempio, utilizzando l'API fetch qui o qualcosa 50 00:02:44,990 --> 00:02:47,260 ‫come la libreria Axios che abbiamo 51 00:02:47,260 --> 00:02:49,010 ‫usato nel nostro codice. 52 00:02:49,010 --> 00:02:51,210 ‫E quindi ciò significa che 53 00:02:51,210 --> 00:02:54,500 ‫dal server saremo sempre in grado di effettuare richieste 54 00:02:54,500 --> 00:02:55,920 ‫cross-origin senza problemi. 55 00:02:55,920 --> 00:02:58,620 ‫Quindi non ci sono restrizioni sul server, 56 00:02:58,620 --> 00:03:00,500 ‫ma in realtà solo 57 00:03:00,500 --> 00:03:03,080 ‫sul browser, per ragioni di sicurezza sostanzialmente. 58 00:03:03,080 --> 00:03:06,680 ‫Oh, e anche per essere considerata cross-origine, una richiesta 59 00:03:06,680 --> 00:03:09,440 ‫potrebbe provenire da un dominio diverso. 60 00:03:09,440 --> 00:03:12,020 ‫Quindi, proprio come abbiamo visto nel nostro 61 00:03:12,020 --> 00:03:15,160 ‫primo esempio qui, ma anche un sottodominio diverso, un 62 00:03:15,160 --> 00:03:17,650 ‫protocollo diverso o anche una porta diversa 63 00:03:17,650 --> 00:03:19,950 ‫è considerato una richiesta cross-origin. 64 00:03:19,950 --> 00:03:24,950 ‫Quindi, ad esempio, se avessimo API. natours. com per la nostra API, 65 00:03:27,100 --> 00:03:31,480 ‫e quindi farebbe una richiesta da natours. com, anche questa 66 00:03:31,480 --> 00:03:34,650 ‫verrebbe considerata una richiesta multiorigine e non 67 00:03:34,650 --> 00:03:37,200 ‫andrebbe a buon fine, ok? 68 00:03:37,200 --> 00:03:39,950 ‫Ma ancora una volta, poiché vogliamo consentire ad altri 69 00:03:39,950 --> 00:03:42,410 ‫siti Web di accedere sostanzialmente alla nostra 70 00:03:42,410 --> 00:03:45,423 ‫API, implementiamo ora la condivisione delle risorse tra le origini. 71 00:03:46,680 --> 00:03:49,620 ‫Va bene, quindi lo facciamo ancora una volta 72 00:03:49,620 --> 00:03:51,653 ‫installando un pacchetto NPM. 73 00:03:53,130 --> 00:03:55,940 ‫Quindi installa NPM e semplicemente CORS. 74 00:03:57,770 --> 00:03:59,933 ‫Allora qui abbiamo bisogno di quel pacchetto. 75 00:04:08,140 --> 00:04:10,450 ‫E ancora una volta, questo CORS 76 00:04:10,450 --> 00:04:12,480 ‫è una funzione middleware 77 00:04:12,480 --> 00:04:17,480 ‫molto semplice che ora dobbiamo usare per la nostra applicazione, va bene? 78 00:04:17,580 --> 00:04:20,250 ‫Quindi facciamolo qui, e perché non farlo proprio 79 00:04:20,250 --> 00:04:21,533 ‫qui in alto? 80 00:04:22,980 --> 00:04:25,930 ‫Quindi diciamo implementare CORS. 81 00:04:28,240 --> 00:04:32,380 ‫E così app. use, quindi chiama CORS, che 82 00:04:32,380 --> 00:04:35,270 ‫a sua volta restituirà una funzione middleware 83 00:04:35,270 --> 00:04:37,860 ‫che aggiungerà un paio di intestazioni diverse 84 00:04:37,860 --> 00:04:39,580 ‫alla nostra risposta. 85 00:04:39,580 --> 00:04:41,870 ‫E poiché tutta questa funzione del middleware 86 00:04:41,870 --> 00:04:44,820 ‫qui è sostanzialmente di aggiungere alcune intestazioni specifiche, forse 87 00:04:44,820 --> 00:04:46,767 ‫stai pensando "Perché stiamo usando" l'ennesimo 88 00:04:46,767 --> 00:04:49,060 ‫pacchetto NPM? "Bene, diamo 89 00:04:49,060 --> 00:04:51,240 ‫solo un'occhiata al codice 90 00:04:51,240 --> 00:04:52,853 ‫di questo pacchetto. 91 00:04:55,370 --> 00:04:58,820 ‫Quindi GitHub CORS, quindi ancora una volta, di 92 00:04:58,820 --> 00:05:02,490 ‫solito è così che trovo la documentazione o il 93 00:05:02,490 --> 00:05:05,610 ‫codice sorgente stesso per i miei pacchetti. 94 00:05:05,610 --> 00:05:08,730 ‫E quindi andiamo qui in lib, che 95 00:05:08,730 --> 00:05:10,793 ‫di solito significa libreria. 96 00:05:11,870 --> 00:05:15,960 ‫E poi tutto quello che abbiamo davvero qui è questo indice. js. 97 00:05:15,960 --> 00:05:20,020 ‫E quindi vedi che qui c'è tutto il codice, e 98 00:05:20,020 --> 00:05:21,500 ‫fondamentalmente quello che 99 00:05:21,500 --> 00:05:24,730 ‫vedi qui è che aggiunge semplicemente questa 100 00:05:24,730 --> 00:05:28,653 ‫intestazione qui con il valore di praticamente tutto alle intestazioni. 101 00:05:29,850 --> 00:05:33,740 ‫Bene, allora hai un paio di altre 102 00:05:33,740 --> 00:05:37,320 ‫intestazioni, Access-Control-Allow-Methods, allow-credentials, e questo è 103 00:05:37,320 --> 00:05:40,003 ‫per diversi casi. 104 00:05:40,900 --> 00:05:42,800 ‫Va bene, ma così vedi 105 00:05:42,800 --> 00:05:45,010 ‫che qui si tratta solo di intestazioni. 106 00:05:45,010 --> 00:05:49,000 ‫Quindi sì, forse potremmo semplicemente aggiungere queste intestazioni da soli, 107 00:05:49,000 --> 00:05:51,430 ‫ma perché dovremmo farlo davvero? 108 00:05:51,430 --> 00:05:52,810 ‫Voglio dire che 109 00:05:52,810 --> 00:05:56,260 ‫potremmo ovviamente, per capire appieno come funziona, ma 110 00:05:56,260 --> 00:05:58,790 ‫in Node. js e 111 00:05:58,790 --> 00:06:01,010 ‫sviluppo Express, nell'ambiente reale di solito 112 00:06:01,010 --> 00:06:03,440 ‫non vorrai reinventare la ruota e invece, 113 00:06:03,440 --> 00:06:05,340 ‫ogni volta che puoi, usa 114 00:06:05,340 --> 00:06:08,810 ‫i pacchetti che altri sviluppatori hanno scritto per noi. 115 00:06:08,810 --> 00:06:12,110 ‫Quindi in realtà ci concentriamo solo sul far funzionare la 116 00:06:12,110 --> 00:06:14,740 ‫nostra applicazione, invece di riscrivere il codice 117 00:06:14,740 --> 00:06:17,750 ‫che altri sviluppatori hanno già scritto per noi, va bene? 118 00:06:17,750 --> 00:06:20,070 ‫Quindi possiamo dare un'occhiata a 119 00:06:20,070 --> 00:06:23,930 ‫tutto questo, ma come ho detto, possiamo anche andare 120 00:06:23,930 --> 00:06:27,110 ‫avanti e usare effettivamente questo, va bene? 121 00:06:27,110 --> 00:06:31,190 ‫Ad ogni modo, è così che abilitiamo la condivisione delle risorse tra le origini per 122 00:06:31,190 --> 00:06:32,890 ‫tutte le richieste in arrivo. 123 00:06:32,890 --> 00:06:35,560 ‫Quindi fondamentalmente per tutta la nostra API. 124 00:06:35,560 --> 00:06:37,950 ‫Ma diciamo che volevamo solo abilitare CORS 125 00:06:37,950 --> 00:06:39,490 ‫su un percorso specifico. 126 00:06:39,490 --> 00:06:43,253 ‫Quindi potremmo usare anche quello, quindi copiamo questo. 127 00:06:44,310 --> 00:06:48,250 ‫Quindi, se volessimo solo abilitare CORS, diciamo durante 128 00:06:48,250 --> 00:06:50,360 ‫i tour, potremmo 129 00:06:50,360 --> 00:06:53,930 ‫semplicemente aggiungerlo qui in questo stack middleware. 130 00:06:53,930 --> 00:06:56,930 ‫Va bene, ma anche in questo caso 131 00:06:56,930 --> 00:06:59,233 ‫vogliamo davvero consentirlo ovunque. 132 00:07:00,210 --> 00:07:03,400 ‫Quindi, come abbiamo visto in precedenza 133 00:07:03,400 --> 00:07:04,980 ‫nel codice 134 00:07:04,980 --> 00:07:09,980 ‫GitHub, ciò che fa è impostare l'intestazione Access-Control-Allow-Origin su tutto. 135 00:07:14,120 --> 00:07:16,040 ‫E quindi ciò che questo significa 136 00:07:16,040 --> 00:07:19,670 ‫tutto qui è per tutte le richieste, non importa da dove provengano. 137 00:07:19,670 --> 00:07:22,350 ‫E quindi questo è l'ideale per consentire a 138 00:07:22,350 --> 00:07:24,380 ‫tutti di utilizzare la nostra API. 139 00:07:24,380 --> 00:07:25,940 ‫Ma ora immagina il 140 00:07:25,940 --> 00:07:28,440 ‫caso in cui non vogliamo condividere la nostra 141 00:07:28,440 --> 00:07:31,590 ‫API, ma vogliamo essere in grado di avere l'API su 142 00:07:31,590 --> 00:07:33,960 ‫un dominio, o anche un sottodominio, e quindi 143 00:07:33,960 --> 00:07:36,760 ‫avere la nostra applicazione front-end su un dominio diverso. 144 00:07:36,760 --> 00:07:40,580 ‫Ad esempio, diciamo, come ho detto prima, avevamo la nostra 145 00:07:40,580 --> 00:07:45,580 ‫API in API. natours. com, ma poi 146 00:07:46,020 --> 00:07:50,290 ‫la nostra app front-end su natours. com. 147 00:07:50,290 --> 00:07:52,210 ‫E quindi in quel caso tutto 148 00:07:52,210 --> 00:07:56,290 ‫ciò che vogliamo che faccia è consentire l'accesso da questa origine qui, in pratica. 149 00:07:56,290 --> 00:08:01,290 ‫E quindi in quel caso useremmo app. use, quindi CORS, quindi 150 00:08:01,700 --> 00:08:06,700 ‫passare un oggetto per le opzioni in cui 151 00:08:06,719 --> 00:08:08,720 ‫specificheremmo l'origine, ad 152 00:08:11,320 --> 00:08:16,320 ‫esempio HTTPS://www. natours. com. 153 00:08:19,547 --> 00:08:21,560 ‫E quindi questo è solo un 154 00:08:21,560 --> 00:08:26,560 ‫esempio nel caso avessimo il nostro front-end a natours. com, va bene? 155 00:08:28,870 --> 00:08:31,510 ‫E così di nuovo, con questo consentiremmo fondamentalmente 156 00:08:31,510 --> 00:08:34,210 ‫solo a questo URL, quindi a questa origine, 157 00:08:34,210 --> 00:08:39,142 ‫di creare richieste all'API. natours. com. 158 00:08:39,142 --> 00:08:42,070 ‫E naturalmente potremmo anche ammettere altre origini. 159 00:08:42,070 --> 00:08:44,400 ‫Ad esempio, solo per alcuni 160 00:08:44,400 --> 00:08:46,770 ‫siti Web specifici che vogliamo consentire, ok? 161 00:08:46,770 --> 00:08:50,690 ‫Ma ancora una volta, in questo caso vogliamo davvero permettere a tutti. 162 00:08:50,690 --> 00:08:54,560 ‫Ok, questa è stata la prima parte dell'abilitazione di CORS, 163 00:08:54,560 --> 00:08:56,940 ‫ma in realtà non è tutto, 164 00:08:56,940 --> 00:08:59,160 ‫perché in questo momento funzionerà 165 00:08:59,160 --> 00:09:01,410 ‫solo per le cosiddette richieste semplici. 166 00:09:01,410 --> 00:09:05,280 ‫E le richieste semplici sono le richieste di ricezione e pubblicazione. 167 00:09:05,280 --> 00:09:08,770 ‫D'altra parte, abbiamo le cosiddette richieste non semplici. 168 00:09:08,770 --> 00:09:12,300 ‫E queste sono richieste di inserimento, correzione ed eliminazione, 169 00:09:12,300 --> 00:09:14,840 ‫o anche richieste che inviano cookie 170 00:09:14,840 --> 00:09:17,210 ‫o utilizzano intestazioni non standard. 171 00:09:17,210 --> 00:09:19,240 ‫E queste non semplici 172 00:09:19,240 --> 00:09:22,490 ‫richieste, richiedono una cosiddetta fase di preflight. 173 00:09:22,490 --> 00:09:25,520 ‫Quindi, ogni volta che c'è una richiesta non 174 00:09:25,520 --> 00:09:27,910 ‫semplice, il browser emetterà automaticamente 175 00:09:27,910 --> 00:09:31,370 ‫la fase di preflight, ed è così che funziona. 176 00:09:31,370 --> 00:09:34,240 ‫Quindi, prima che la vera richiesta si verifichi 177 00:09:34,240 --> 00:09:36,480 ‫effettivamente, e diciamo una richiesta di 178 00:09:36,480 --> 00:09:39,640 ‫eliminazione, il browser esegue prima una richiesta di opzioni 179 00:09:39,640 --> 00:09:42,400 ‫per capire se la richiesta effettiva è 180 00:09:42,400 --> 00:09:44,150 ‫sicura da inviare. 181 00:09:44,150 --> 00:09:46,410 ‫E quindi ciò che significa per noi 182 00:09:46,410 --> 00:09:49,410 ‫sviluppatori è che sul nostro server dobbiamo effettivamente rispondere 183 00:09:49,410 --> 00:09:51,420 ‫a quella richiesta di opzioni. 184 00:09:51,420 --> 00:09:54,860 ‫E le opzioni sono in realtà solo un 185 00:09:54,860 --> 00:09:59,110 ‫altro metodo HTTP, quindi proprio come ottenere, pubblicare o eliminare, va bene? 186 00:09:59,110 --> 00:10:02,530 ‫Quindi, in pratica, quando riceviamo una di queste 187 00:10:02,530 --> 00:10:05,080 ‫richieste di opzioni sul nostro 188 00:10:05,080 --> 00:10:08,120 ‫server, dobbiamo inviare la stessa intestazione Access-Control-Allow-Origin. 189 00:10:08,120 --> 00:10:10,430 ‫E in questo modo il browser saprà 190 00:10:10,430 --> 00:10:11,930 ‫che la richiesta 191 00:10:11,930 --> 00:10:15,520 ‫effettiva, e in questo caso la richiesta di eliminazione, è 192 00:10:15,520 --> 00:10:20,070 ‫sicura da eseguire, e quindi eseguirà la richiesta di eliminazione stessa, va bene? 193 00:10:20,070 --> 00:10:24,513 ‫Quindi facciamolo e diciamo app. opzioni. 194 00:10:26,130 --> 00:10:29,200 ‫Ok, e quindi di nuovo questo è molto simile a 195 00:10:29,200 --> 00:10:34,200 ‫fare app. ottenere per esempio, o . inviare, . Elimina, . patch, e 196 00:10:35,430 --> 00:10:37,850 ‫tutti questi verbi che già conosci. 197 00:10:37,850 --> 00:10:42,490 ‫Così . options non è impostare alcuna opzione sulla 198 00:10:42,490 --> 00:10:46,490 ‫nostra applicazione, è in realtà solo un altro metodo HTTP a cui possiamo rispondere. 199 00:10:46,490 --> 00:10:49,670 ‫E così ancora, in questo caso dobbiamo rispondere perché 200 00:10:49,670 --> 00:10:52,010 ‫il browser invia una richiesta di 201 00:10:52,010 --> 00:10:54,630 ‫opzione quando c'è una fase di preflight. 202 00:10:54,630 --> 00:10:56,520 ‫Quindi dobbiamo definire il 203 00:10:56,520 --> 00:10:59,630 ‫percorso per il quale vogliamo gestire le opzioni. 204 00:10:59,630 --> 00:11:04,630 ‫E ancora una volta, lo faremo su tutte le rotte, ok? 205 00:11:04,920 --> 00:11:07,270 ‫E poi fondamentalmente il gestore, 206 00:11:07,270 --> 00:11:11,653 ‫che ancora una volta è il middleware CORS, va bene? 207 00:11:12,610 --> 00:11:15,370 ‫E ancora una volta, potremmo ovviamente 208 00:11:15,370 --> 00:11:18,810 ‫consentire queste richieste complesse solo su un percorso specifico. 209 00:11:18,810 --> 00:11:22,630 ‫Ad esempio app. opzioni, 210 00:11:22,630 --> 00:11:27,630 ‫e diciamo solo su 211 00:11:31,110 --> 00:11:34,340 ‫api/v1/tours/:id, così, ok? 212 00:11:34,340 --> 00:11:37,730 ‫Quindi diciamo che qualcuno fa una cancellazione o una richiesta di 213 00:11:37,730 --> 00:11:39,840 ‫patch per uno dei tour, e solo 214 00:11:39,840 --> 00:11:41,890 ‫lì permettiamo una fase di preflight. 215 00:11:41,890 --> 00:11:44,340 ‫E quindi fondamentalmente solo su questo 216 00:11:44,340 --> 00:11:47,680 ‫percorso qui, una di queste richieste complesse può essere fatta. 217 00:11:47,680 --> 00:11:51,840 ‫Quindi in questo caso qui dove avevamo solo questo percorso di opzioni, 218 00:11:51,840 --> 00:11:54,150 ‫solo i tour potevano essere eliminati 219 00:11:54,150 --> 00:11:56,820 ‫o corretti da una richiesta multiorigine, giusto? 220 00:11:56,820 --> 00:11:59,870 ‫E nessuna delle nostre altre risorse, va bene? 221 00:11:59,870 --> 00:12:04,000 ‫Ma ancora una volta, permettiamoli tutti, ok? 222 00:12:04,000 --> 00:12:07,960 ‫Ma lascerò ancora questo qui per te come esempio. 223 00:12:07,960 --> 00:12:11,550 ‫Ok, comunque, è tutto ciò che dobbiamo fare per 224 00:12:11,550 --> 00:12:14,410 ‫abilitare CORS per la nostra applicazione. 225 00:12:14,410 --> 00:12:17,030 ‫E quindi ora ridistribuiamo l'applicazione spingendola 226 00:12:17,030 --> 00:12:19,620 ‫di nuovo su Heroku. 227 00:12:19,620 --> 00:12:23,010 ‫Ma prima di farlo, in realtà voglio cambiare qualcosa qui 228 00:12:23,010 --> 00:12:25,520 ‫nel nostro pacchetto. json. 229 00:12:25,520 --> 00:12:28,010 ‫E questo è questo motore del nodo qui. 230 00:12:28,010 --> 00:12:30,380 ‫Quindi a volte può creare dei 231 00:12:30,380 --> 00:12:33,220 ‫problemi quando specifichiamo la versione in questo modo. 232 00:12:33,220 --> 00:12:35,770 ‫Quindi, in pratica, consentire l'installazione di 233 00:12:35,770 --> 00:12:37,400 ‫versioni superiori alla versione 234 00:12:37,400 --> 00:12:38,930 ‫attualmente in esecuzione. 235 00:12:38,930 --> 00:12:40,540 ‫E quindi quello che 236 00:12:40,540 --> 00:12:43,700 ‫voglio fare qui è dire che dovrebbe installare solo la versione 237 00:12:43,700 --> 00:12:45,493 ‫10 e non una versione successiva. 238 00:12:46,560 --> 00:12:50,970 ‫Quindi lo faccio dicendo questo simbolo caret qui, e poi 239 00:12:50,970 --> 00:12:52,470 ‫la versione 10. 240 00:12:52,470 --> 00:12:55,990 ‫E così ancora una volta, questo sta usando il versionamento semantico, 241 00:12:55,990 --> 00:12:57,770 ‫e così proprio come qui. 242 00:12:57,770 --> 00:13:00,610 ‫Il che, ricorda, significa che a 243 00:13:00,610 --> 00:13:04,390 ‫NPM è consentito installare una qualsiasi di queste subversioni o 244 00:13:04,390 --> 00:13:08,070 ‫versioni di patch, ma non passare alla versione principale successiva. 245 00:13:08,070 --> 00:13:10,760 ‫E quindi qui quello che sto facendo è lo stesso, ok? 246 00:13:10,760 --> 00:13:14,350 ‫Quindi attualmente sto eseguendo Node versione 10 qualcosa, 247 00:13:14,350 --> 00:13:19,070 ‫quindi puoi confermare la tua digitando node -v, e quindi vedi che 248 00:13:19,070 --> 00:13:22,060 ‫sono su 10. 11 in questo momento. 249 00:13:22,060 --> 00:13:24,270 ‫Ma probabilmente quando guarderai questo 250 00:13:24,270 --> 00:13:29,250 ‫corso, sarai almeno alla versione 12, forse anche 14 o 16, a seconda 251 00:13:29,250 --> 00:13:32,510 ‫di quanto tempo sarai nel futuro, va bene? 252 00:13:32,510 --> 00:13:33,860 ‫E non preoccuparti, ovviamente, tutto 253 00:13:33,860 --> 00:13:36,240 ‫ciò che ti mostro qui nel corso dovrebbe 254 00:13:36,240 --> 00:13:37,550 ‫ancora funzionare correttamente 255 00:13:37,550 --> 00:13:40,010 ‫per qualsiasi versione di Node che stai utilizzando. 256 00:13:40,010 --> 00:13:42,030 ‫Quindi, se stai usando la 257 00:13:42,030 --> 00:13:46,900 ‫versione 12, per favore vai avanti e metti il 12 proprio qui, ok? 258 00:13:46,900 --> 00:13:51,170 ‫Ad ogni modo, ora aggiungiamo tutti 259 00:13:51,170 --> 00:13:56,163 ‫i file modificati all'area di staging, quindi aggiungi tutto. 260 00:13:58,300 --> 00:14:02,053 ‫E poi impegnarli con un messaggio significativo, quindi 261 00:14:03,670 --> 00:14:05,260 ‫implementato CORS. 262 00:14:08,707 --> 00:14:11,120 ‫E poi spingi il maestro Heroku. 263 00:14:14,390 --> 00:14:16,200 ‫E ora ci vuole un po' 264 00:14:16,200 --> 00:14:18,453 ‫di tempo, quindi ci vediamo quando sarà finito. 265 00:14:21,950 --> 00:14:25,640 ‫Quindi l'applicazione è stata distribuita con successo ora, ricarichiamo 266 00:14:25,640 --> 00:14:28,230 ‫rapidamente qui solo per vedere 267 00:14:29,100 --> 00:14:32,550 ‫se funziona ancora, e in effetti lo è. 268 00:14:32,550 --> 00:14:37,190 ‫E quindi ora per dimostrarti che funziona in modo diverso con 269 00:14:37,190 --> 00:14:38,970 ‫CORS, se ripetiamo 270 00:14:38,970 --> 00:14:41,720 ‫questa richiesta qui dovrebbe funzionare effettivamente, giusto? 271 00:14:41,720 --> 00:14:45,170 ‫Quindi proviamoci e ci siamo. 272 00:14:45,170 --> 00:14:48,233 ‫Nessun errore questa volta, controlliamo x qui. 273 00:14:49,750 --> 00:14:53,740 ‫E infatti, sembra che ci sia qualcosa qui. 274 00:14:53,740 --> 00:14:57,150 ‫Quindi vedi che in realtà la risposta è di tipo 275 00:14:57,150 --> 00:15:01,053 ‫CORS, abbiamo le nostre intestazioni, beh, non riesco davvero a vederle qui. 276 00:15:01,920 --> 00:15:04,010 ‫Non importa, qui abbiamo anche solo 277 00:15:04,010 --> 00:15:05,690 ‫una stringa leggibile, ma 278 00:15:05,690 --> 00:15:08,070 ‫ancora una volta non è affatto importante. 279 00:15:08,070 --> 00:15:10,450 ‫Ciò che conta qui è 280 00:15:10,450 --> 00:15:15,450 ‫che ora siamo in grado di eseguire richieste multiorigine, quindi è fantastico. 281 00:15:15,800 --> 00:15:19,130 ‫Ora lascia che ti mostri anche le 282 00:15:19,130 --> 00:15:21,260 ‫intestazioni effettive che il 283 00:15:21,260 --> 00:15:25,610 ‫pacchetto CORS aggiunge semplicemente facendo qualche richiesta qui in Postman. 284 00:15:25,610 --> 00:15:28,513 ‫Quindi in produzione, ora lo mandiamo. 285 00:15:31,540 --> 00:15:34,240 ‫E così qui puoi 286 00:15:34,240 --> 00:15:37,690 ‫vedere nelle intestazioni di risposta che in 287 00:15:37,690 --> 00:15:41,960 ‫realtà abbiamo questo Access-Control-Allow-Origin impostato su tutto, ok, fantastico. 288 00:15:41,960 --> 00:15:45,000 ‫Ed è così che si implementa effettivamente la condivisione 289 00:15:45,000 --> 00:15:47,993 ‫delle risorse tra le origini nella propria applicazione.