[MUSIC]
Avendo compreso alcuni dettagli su cors nella lezione precedente,
in questo esercizio useremo il modulo nodo cors e configureremo il nostro server express.
Per consentire al server di rispondere con le
intestazioni cors appropriate relative alla richiesta proveniente dal sito del client.
Per iniziare come ci si aspetterebbe, prima installeremo il modulo nodo cors.
Quindi, al prompt, digita npm install.
Assicurarsi di essere nella cartella del server Confusione e quindi cors - salvare.
E poi installare il modulo cors.
E come puoi vedere, in questo corso sto usando cors @2 .8.4.
Una volta installato il modulo cors,
andiamo al nostro editor e poi configurare il nostro server express.
Sto andando dal nostro editore.
Ora nella cartella route, ora che è dove applicherei principalmente
il modulo cors perché è lì che vengono servite tutte le varie rotte.
Quindi nella cartella route, aggiungerò un nuovo file chiamato cors.js.
E poi in questo file, configureremo il modulo cors.
Ora questo è il mio modo di mettere tutte le informazioni relative a
cors in un modulo nodo basato su file separato qui.
Quindi, al prompt,
fammi provare const express =
require ('express').
E prendiamo,
il modulo cors in.
Const app = express (); e
quindi diciamo una whitelist di una matrice di stringhe.
La whitelist contiene tutte le origini
che questo server è disposto ad accettare.
Ora includerò un paio di loro qui,
localhost: 3000 e
poi, Host locale 3443.
E se hai bisogno di più origini da aggiungere alla tua whitelist, puoi semplicemente aggiungerle
alla tua whitelist perché sto cercando esplicitamente di configurare il mio modulo cors.
Quindi qui, dichiarerò
una funzione A qui,
Con la richiesta e la chiamata vengono definiti qui.
E dentro questo ho intenzione di capire che le opzioni cors qui.
Quindi inizierò dicendo CorsOptions,
var CorsOptions; e poi
dirò se (whitelist.indexOf (req.header ('Origin'-
)).
Quindi puoi vedere che qui stiamo specificando nel codice qui,
stiamo dicendo req.header.
Quindi, se l'intestazione della richiesta in arrivo contiene un feed di origine,
allora stiamo andando a controllare questa whitelist.
Alla ricerca di quella particolare origine, è presente in questa whitelist?
Ecco perché stiamo dicendo WhiteList.indexOf.
Quindi questa è un'operazione di array che viene eseguita qui.
E diremo in origine non è uguale a -1.
Come sapete, l'indice di operazione restituirà l'indice maggiore o
uguale a zero se questo è presente in questo array.
Restituirà -1 se questo non è presente in questo array.
Quindi un modo molto rapido di verificare se le
richieste in arrivo sono originate nella whitelist.
In tal caso, diremo
CorsOptions, CorsOptions.
CorsOptions = e questo è dove
specificherò {origin: true}
Quindi dicendo {origin: true}, il che significa che l'
origine originale nella richiesta in arrivo è nella whitelist.
Quindi permetterò che venga accettato.
Quindi, quando imposto l'origine è uguale a true qui, il mio modulo cors
risponderà dicendo che il controllo dell'accesso consente l'origine, e quindi includerà quell'origine nelle
intestazioni con la chiave di origine del controllo di accesso consente lì.
Quindi in questo modo il mio lato client verrà informato dicendo che va bene per
il server accettare questa richiesta per questa particolare origine.
Altrimenti, quindi se questo non è il caso, quindi
se il req.header ('Origin') non è
nella whitelist, allora vedrai CorsOptions.
{ origin: false}.
Quindi, quando si imposta l'origine su false, il controller di accesso
AllowIGin non verrà restituito dal mio sito server.
E poi una volta che lo abbiamo fatto,
allora diremo callback (null, CorsOptions);.
Questo è tutto. Quindi chiamando questa funzione qui,
CorsoPtionsDelegate qui, controlleremo per vedere se la
richiesta in arrivo appartiene a una delle origini whitelist.
Se lo è, allora rispondi con il controllo di accesso
AllowReigin con l'origine della richiesta impostata lì.
Altrimenti non includerà quel controllo di accesso AllowReigin quando risponde.
Ora, da questa funzione, esporteremo cors come cors qui.
Ora, se configuri il modulo cors semplicemente dicendo cors
senza alcuna opzione, allora ciò significa che questo
risponderà con il controllo di accesso AllowReigin con il pedaggio dei caratteri jolly.
Ci sono alcune regole su cui questo è accettabile fare,
specialmente ogni volta che eseguiamo operazioni get.
Va bene accettarlo.
Altrimenti, diremo, corsWithOptions = cors, e
quindi forniremo la
funzione) CorsOptionsDelegate) che abbiamo appena definito in precedenza.
Quindi in questo modo, se è necessario applicare A cors
con opzioni specifiche a un particolare percorso, useremo questa funzione.
Altrimenti, useremo semplicemente i cors standard.
Ora che abbiamo definito il codice cors-correlato in cors.js,
iniziamo ad applicarlo ai vari percorsi.
Quindi inizieremo con il DishRouter.
Quindi apriamo il DishRouter, e
nel DishRouter, prima
[NOISE] importare [NOISE]. /cors.
Si noti che il file cors.js si trova nella stessa cartella, quindi
possiamo semplicemente importarlo dicendo. /cors.js.
Modulo nodo basato su file.
Ora, per la richiesta GET, una volta che l'abbiamo importata.
Ora, per il DishRouter, ho intenzione di impostare il campo delle opzioni.
Quindi, come hai visto, ogni volta che hai bisogno di eseguire la verifica preliminare delle tue richieste,
il client invierà prima il messaggio di richiesta OPTIONS HTTP e quindi otterrà
la risposta dal lato server prima che invii effettivamente la richiesta effettiva.
Quindi, per le opzioni, se il messaggio delle opzioni viene ricevuto su questo particolare percorso,
allora risponderemo come cors.corsWithOptions, e,
Con la funzione di callback qui, che dice,
res.sendStatus, 200.
Non abbiamo bisogno di mandare altro che solo lo stato da qui.
E così, quando viene ricevuto un messaggio di opzioni,
quando questo risponderà, vedremo quali risultati quando invieremo una richiesta di opzione
dal lato client al lato server in un breve volo.
Ora, queste opzioni, ho intenzione di applicare ad ogni percorso.
Quindi, per il DishId, per
il DishID/Commenti, e anche per
il DishID/Comments start, /:CommentId.
Quindi, tutti i casi, ho intenzione di applicare le stesse opzioni lì.
Ora, tornando indietro, per
il GET, ho intenzione di applicare semplicemente cors.
Quindi, per la richiesta GET, dirò, Cors.cors,
quindi noti che questo è il primo middleware che applicheremo, e
dopo di che passerà a questo messaggio qui.
Quindi il middleware cors viene introdotto lì.
Per il POST, applicheranno cors.corsWithOptions.
Stessa cosa per questo, PUT,
DELETE.
Stessa cosa per i rimanenti POST, PUT e
DELETE su tutti gli altri percorsi qui.
Per GET, useremo solo i cors,
quindi lasciami applicare corsWithOptions a POST
, PUT e DELETE in tutti i percorsi qui,
quindi POST, PUT e DELETE.
Ora, per l'operazione GET come abbiamo visto per
la versione di DishRouter ho appena applicato cors.cors,
quindi ho intenzione di copiarlo e quindi applicarlo a tutti i GET.
Quindi, per questo GET, quindi scorrendo verso il basso per questo GET, e
poi anche per l'ultimo, applicherò la stessa opzione.
Quindi il mio DishRouter è ora aggiornato.
Ora, ho intenzione di fare la stessa cosa con PromorOuter,
LeaderRouter, UploadRouter e anche users.js.
Quindi, apriamo il LeaderRouter prossimo.
Nel LeaderRouter, la prima cosa ovviamente è
includere il modulo nodo basato su file cors, quindi
lasciami copiare e incollarlo nel LeaderRouter.
Quindi le opzioni, ho intenzione di applicare la stessa cosa anche al LeaderRouter.
Quindi, per il LeaderRouter, applicherò il CorsWithOptions,
e poi la stessa cosa con LeaderRouter o LeaderID.
Hai solo due percorsi qui, quindi applicherò le opzioni per entrambi.
Per le operazioni GET,
ho bisogno di applicare cors.cors, quindi copiarlo da DishRouter.
Questo GET, applicherò la stessa cosa, e
poi anche questo GET, applicherò la stessa cosa.
Ora, per il POST, PUT, e DELETE, come hai visto, applicheremo cors.corsWithOptions,
Per il POST,
quindi PUT, e DELETE.
E la stessa cosa
anche per il POST, PUT e DELETE del LeaderID.
Quindi ora il mio LeaderRouter è aggiornato, andiamo a PromorOuter.
E anche nel PromorOuter, iniziamo in basso qui per
DELETE, CorsWithOptions, PUT, POST.
Quindi a questo DELETE, PUT, POST.
E per il GET, ovviamente,
i cors.cors seguono questo GET e l'altro GET qui sotto.
E poi, importiamo quel cors,
quindi copiandolo dal mio LeaderRouter.
Quindi importiamo cors qui, e poi le opzioni.
Quindi, ho intenzione di copiare le opzioni da qui e
poi andare in PromorOuter, applicherò le opzioni qui.
E anche per gli altri PromorOuter, stesse opzioni.
Ora, UploadRouter.
Quindi vai in UploadRouter, ancora una volta
, importa,
Cor, poi, per UploadRouter.route,
fammi applicare le opzioni lì.
E per il GET,
diremo cors.cors.
Il POST sarebbe cors.corsWithOptions.
Lo stesso vale per il, PUT.
E cancella, quindi il mio router di caricamento è aggiornato.
L' ultimo sono gli utenti.
Quindi, negli utenti, lasciami,
Importa auto, E
poi, in questo caso, perché stiamo facendo router.get, router.post, e così via.
Quindi per ognuno di loro, ho intenzione di entrare e applicare esplicitamente,
autos.carsWithOptions, anche per GET qui.
Poiché il GET viene eseguito dall'amministratore qui,
nessun altro utente può essere autorizzato a eseguire tale operazione.
Ma la registrazione, anche carsWithOptions per
il login anche io applicherò, Questo è tutto.
Salviamo tutte le modifiche in modo da
avere aggiornamenti tutti i vari percorsi per utilizzare le auto.
Ora andiamo ad avviare il nostro server e poi vediamo come questa macchina ci aiuta.
Andando al terminale,
fammi avviare il sito del server qui.
E quando il server è avviato,
andiamo al nostro Postman e poi inviare una richiesta GET.
Quindi, quando si invia una richiesta GET a un localhost: 3000dish,
si otterrà immediatamente una risposta dal lato server.
Ovviamente in questo momento il mio database è vuoto, quindi ottengo un array vuoto qui, ma
diamo un'occhiata in particolare alle intestazioni perché è lì che
il punto di interesse per noi è in questo esercizio.
Quindi qui, puoi vedere che abbiamo un'intestazione aggiuntiva
qui chiamata Access-Control-Allow-Origin.
Quindi l'Access-Control-Allow-Origin come vedete fornisce l'auto selvaggia,
che è la stella qui.
Quindi significa che, qualsiasi origine per accedere a questa particolare risorsa,
quindi il server dice che va bene, qualsiasi origine sarà autorizzata ad accedere a questa risorsa.
Per la richiesta GET siamo soddisfatti di questo.
Cerchiamo ora di accedere al sistema, e
poi una volta ottenuto il token, lasciatemi copiare il token qui.
E poi eseguiremo un'operazione di cancellazione sul nostro sito server.
Quindi cancelleremo i piatti qui, quindi
lasciami includere il token, nell'intestazione di autorizzazione qui.
E si noti anche che per l'operazione di eliminazione sto impostando l'origine.
Quindi un altro campo qui chiamato origine a httpslocalhost: 3343 qui.
Quindi indica che questa operazione di eliminazione sta effettivamente
cercando di eliminare a questa particolare origine qui.
E così quando eseguiamo questa operazione così, se si sta facendo questo da un browser,
l'origine verrà automaticamente impostata dal browser in base
alla pagina web da cui la richiesta è originata.
Ma qui, dal momento che stiamo usando Postman, devo impostare esplicitamente l'origine qui.
Quindi lasciami inviare la richiesta con questo campo di origine impostato qui.
E poi si noterà che il campo di intestazione ora contiene
Access-Control-Allow-Origin con localhost: 3443 specificato qui.
E come noterai che questa origine è nella lista bianca.
Ecco perché questo Access-Control-Allow-Origin è impostato
sulla stessa origine che abbiamo specificato lì.
Se si specifica un'origine diversa, ad esempio,
se si specifica, Dire localhost:2000 per esempio.
Noterai che questo non avrà, nella risposta proveniente dal server,
questo non avrà l'Access-Control-Allow-Origin impostato qui.
Perché, questo particolare indirizzo non è nella whitelist del sito server.
Diamo ora un'occhiata a un esempio di preflighting di una richiesta.
Quindi, per farlo, nel Postman, seleziona Opzioni qui,
quindi inviamo una richiesta di preflighting
a localhost: 3443dish.
E nell'intestazione lo faremo, Metti
l'origine come https://localhost3443.
E poi questo invia questa richiesta al server.
E in risposta a questa richiesta di opzioni che hai inviato al server,
noterai che nel messaggio di risposta diremo 204 Nessun contenuto.
Non vi è alcun contenuto da restituire qui.
Ma, quando si guardano le intestazioni del messaggio di risposta che arriva, si noti che
abbiamo Access-Control-Allow-Origin da impostare su quel valore.
Si noti inoltre che imposta i metodi Access-Control-Allow.
E qui specifica quei metodi che il server sarà
disposto ad accettare a questo punto finale.
Quindi stai informando il client dicendo che,
tutti questi metodi sono accettabili per il server al punto finale corrispondente.
Quindi, questo è il modo in cui possiamo fare la preflighting di una richiesta.
Inviando il messaggio di richiesta opzioni prima, e
poi recuperando le informazioni dal server qui.
E come ricorderai, questo è ciò che abbiamo configurato nella
parte delle opzioni di ciascuno dei punti finali del router.
Quindi questo è il modo in cui possiamo configurare il nostro modulo nodo auto e
quindi configurare il nostro server per rispondere con vari messaggi di intestazione.
Con questo completiamo questo esercizio.
In questo esercizio abbiamo visto come possiamo configurare il nostro server per essere in grado di inviare
indietro varie intestazioni relative al corso nel messaggio di risposta
utilizzando il modulo nodo corso.
Con questo, completiamo questo esercizio.
Questo è un buon momento per fare un commento GIT con il corso dei messaggi.
[ MUSIC]