[MÚSICA]
Habiendo entendido algunos detalles sobre cors en la conferencia anterior,
en este ejercicio usaremos el módulo cors Node y configuraremos nuestro servidor express.
Para permitir que el servidor responda con los
encabezados relacionados cors apropiados a la solicitud que viene desde el sitio del cliente.
Para empezar como era de esperar, primero instalaremos el módulo cors Node.
Entonces, en el símbolo del sistema, escriba npm install.
Asegúrese de que se encuentra en la carpeta del servidor ConFusion y, a continuación, cors — guardar.
Y luego instale el módulo cors.
Y como puede ver, en este curso estoy usando cors @2 .8.4.
Una vez que haya instalado el módulo cors,
vamos a nuestro editor y luego configurar nuestro servidor express.
Ir a nuestro editor.
Ahora en la carpeta de rutas, ahora es donde aplicaría principalmente
el módulo cors porque ahí es donde se están atendiendo todas las diversas rutas.
Entonces, en la carpeta de rutas, agregaré un nuevo archivo llamado cors.js.
Y luego en este archivo, configuraremos el módulo cors.
Ahora, esta es mi forma de poner toda la información relacionada con
cors en un módulo de nodo basado en archivos separado aquí.
Entonces, en el indicador,
permítanme probar const express =
require ('express').
Y vamos a entrar,
el módulo Cors.
Const app = express (); y
luego digamos una lista blanca de una matriz de cadenas.
La lista blanca contiene todos los orígenes
que este servidor está dispuesto a aceptar.
Ahora voy a incluir un par de ellos aquí,
localhost: 3000 y
luego, anfitrión local 3443.
Y si necesita más orígenes para agregarse a su lista blanca, simplemente puede agregarlos
a su lista blanca porque estoy tratando explícitamente de configurar mi módulo cors.
Así que aquí, declararé
una función A aquí,
con la solicitud y la devolución de la llamada se definen aquí.
Y dentro de esto voy a pensar que las opciones de cors aquí.
Así que comenzaré diciendo CorsOptions,
var CorsOptions; y luego
diré if (Whitelist.indexOf (req.header ('Origin'-
))).
Así que puede ver que aquí estamos especificando en el código aquí,
estamos diciendo req.header.
Entonces, si el encabezado de solicitud entrante contiene una fuente de origen,
entonces vamos a verificar esta lista blanca.
Buscando ese origen particular, ¿está presente en esta lista blanca?
Así que es por eso que estamos diciendo Whitelist.indexOf.
Entonces, esta es una operación de matriz que se está haciendo aquí.
Y diremos que en el origen no es igual a -1.
Como usted sabe, el índice de operación devolverá el índice mayor o
igual a cero si esto está presente en esta matriz.
Devolverá -1 si esto no está presente en esta matriz.
Por lo tanto, una forma muy rápida de verificar si las
solicitudes entrantes se originan en la lista blanca.
En ese caso, diremos
CorsOptions, CorsoPtions.
CorsOptions = y aquí es donde
especificaré {origin: true}
Entonces diciendo {origin: true}, lo que significa que el
origen original en la solicitud entrante está en la lista blanca.
Así que permitiré que se acepte.
Entonces, cuando configuro el origen es igual a verdadero aquí, entonces mi módulo cors
responderá diciendo que el control de acceso permite el origen, y luego incluirá ese origen en
los encabezados con la clave de origen de control de acceso permitido allí.
Así que de esa manera se informará a mi lado del cliente diciendo que está bien
que el servidor acepte esta solicitud para este origen en particular.
De lo contrario, si ese no es el caso, entonces
si el req.header ('Origen') no está en
la lista blanca, entonces verá CorsOptions.
{ origen: falso}.
Entonces, cuando establece el origen en falso, entonces el controlador de acceso
AlloWoriGin no será devuelto por mi sitio de servidor.
Y luego, una vez que
hayamos hecho eso, entonces diremos devolución de llamada (null, CorsOptions);.
Eso es todo. Entonces, llamando a esta función aquí,
CorsoptionsDelegate aquí, comprobaremos si la
solicitud entrante pertenece a uno de los orígenes incluidos en la lista blanca.
Si lo es, entonces responde con el control de acceso
AllowOrigin con el origen de la solicitud establecida allí.
De lo contrario, no incluirá ese control de acceso AlloWorigin cuando responda.
Ahora, desde esta función, vamos a exportar cors como cors aquí.
Ahora, si configura el módulo cors simplemente diciendo cors
sin ninguna opción, entonces eso significa que esto
responderá con el control de acceso AlloWorigin con el peaje de comodines.
Hay ciertas reglas sobre las que esto es aceptable hacer,
especialmente cuando realizamos operaciones get.
Está bien aceptar eso.
De lo contrario, diremos, CorsWithOptions = cors, y
luego proporcionaremos la
función) CorsOptionsDelegate) que acabamos de definir anteriormente.
De esta manera, si necesita aplicar cors A
con opciones específicas a una ruta en particular, usaremos esta función.
De lo contrario, simplemente usaremos los cors estándar.
Ahora que hemos definido el código relacionado con cors en cors.js,
empecemos a aplicar esto a las diversas rutas.
Entonces comenzaremos con el DishRouter.
Así que vamos a abrir el DishRouter, y
en el DishRouter, primero
[RUIDO] importaremos [RUIDO]. /cors.
Tenga en cuenta que el archivo cors.js está en la misma carpeta,
por lo que podemos importarlo diciendo. /cors.js.
Módulo de nodo basado en archivos.
Ahora, para la solicitud GET, una vez que hayamos importado eso.
Ahora, para el DishRouter, voy a configurar el campo de opciones.
Entonces, como vio, cada vez que necesite verificar sus solicitudes,
el cliente primero enviará el mensaje de solicitud HTTP OPTIONS y luego obtendrá
la respuesta del lado del servidor antes de que realmente envíe la solicitud real.
Por lo tanto, para las opciones, si el mensaje de opciones se recibe en esta ruta en particular,
entonces vamos a responder como cors.corsWithOptions, y,
Con la función de devolución de llamada aquí, que dice,
Res.sendStatus, 200.
No necesitamos enviar nada más que el estado desde aquí.
Y así, cuando se recibe un mensaje de opciones,
cuando esto responda, veremos qué resultados cuando enviamos una solicitud
de opción desde el lado del cliente al lado del servidor en un corto vuelo.
Ahora, estas opciones, voy a aplicar a cada ruta.
Por lo tanto, para el Dishid, para
el plato/comentarios, y también para
el Dishid/Comments start, /:CommentID.
Entonces, en todos los casos, voy a aplicar las mismas opciones allí.
Ahora, volviendo a subir, para
el GET, simplemente voy a aplicar cors.
Entonces, para la solicitud GET, diré, Cors.cors,
así que observe que este es el primer middleware que aplicaremos, y
después de eso pasará a este mensaje aquí.
Así que el middleware cors se introduce allí.
Para la POST, aplicarán Cors.corsWithOptions.
Lo mismo para eso, PUT,
DELETE.
Lo mismo para el POST restante, PUT y
DELETE en todas las otras rutas aquí.
Para GET, solo usaremos los cors,
así que permítanme aplicar CorsWithOptions a POST
, PUT y DELETE en todas las rutas aquí,
así que POST, PUT y DELETE.
Ahora, para la operación GET como vimos para
la versión de DishRouter acabo de aplicar cors.cors,
así que voy a copiar eso y luego aplicarlo a todos los GETs.
Entonces, para este GET, luego desplácese hacia abajo para este GET, y
luego también para el último, también aplicaré la misma opción.
Así que mi DishRouter ahora está actualizado.
Ahora, voy a hacer lo mismo con el PromoRouter,
el LeaderRouter, el UploadRouter y también el users.js.
Entonces, vamos a abrir el LeaderRouter a continuación.
En LeaderRouter, lo primero, por supuesto, es
incluir el módulo de nodo basado en archivos cors, así
que permítanme copiarlo y luego pegarlo en LeaderRouter.
Luego, las opciones, voy a aplicar lo mismo al LeaderRouter también.
Entonces, para el LeaderRouter, aplicaré CorsWithOptions,
y luego lo mismo con LeaderRouter o LeaderID.
Solo tienes dos rutas aquí, así que aplicaré las opciones para ambas.
Para las operaciones GET,
necesito aplicar cors.cors, así que copiando esto desde el DishRouter.
Este GET, aplicaré lo mismo, y
luego también este GET, aplicaré lo mismo.
Ahora, para POST, PUT y DELETE, como vio, aplicaremos Cors.corsWithOptions, For
the POST
, PUT y DELETE.
Y lo mismo para el POST, PUT y
DELETE del LeaderID también.
Así que ahora mi LeaderRouter está actualizado, vamos a PromoRouter.
Y en el PromoRouter también, comencemos en la parte inferior aquí para
el DELETE, CorsWithOptions, PUT, POST.
Luego, a este DELETE, PUT, POST.
Y para el GET, por supuesto,
los cors.cors siguen este GET y el otro GET abajo aquí abajo.
Y luego, vamos a importar esos cors,
así que copiando esto de mi LeaderRouter.
Luego importamos cors aquí, y luego las opciones.
Por lo tanto, voy a copiar las opciones desde aquí y
luego entrar en el PromoRouter, voy a aplicar las opciones aquí.
Y también a los otros PromoRouter, las mismas opciones.
Ahora, UploadRouter.
Así que vaya al UploadRouter, de nuevo,
importar, Cor,
Luego, después de eso, para el UploadRouter.Route,
déjame aplicar las opciones allí.
Y para el GET,
diremos cors.cors.
El POST sería cors.corsWithOptions.
Lo mismo para el, PUT.
Y elimine, para que mi enrutador de carga se actualice.
El último son los usuarios.
Entonces, en los usuarios, déjame,
Importar coches, Y
luego, en este caso porque estamos haciendo router.get, router.post, y así sucesivamente.
Así que para cada uno de ellos, voy a entrar y aplicar explícitamente,
coches.carsWithOptions, incluso para el GET aquí.
Debido a que el GET lo realiza el administrador aquí,
no se puede permitir a ningún otro usuario realizar eso.
Pero el registro, también cochesWithOptions para
el inicio de sesión también voy a aplicar, Eso es todo.
Vamos a guardar todos los cambios para que
tengamos actualizaciones de todas las rutas para usar coches.
Vamos ahora a empezar nuestro servidor y luego ver cómo estos coches nos ayudan. Al
ir a la terminal,
déjame iniciar el sitio del servidor aquí.
Y cuando se inicie el servidor,
vayamos a nuestro cartero y luego enviemos una solicitud GET.
Por lo tanto, cuando envía una solicitud GET a un localhost:
3000dish, recibirá inmediatamente una respuesta del lado del servidor.
Por supuesto en este momento mi base de datos está vacía, así que obtengo una matriz vacía aquí, pero
veamos en particular los encabezados porque ahí es donde
el punto de interés para nosotros está en este ejercicio.
Así que aquí, puede ver que tenemos un encabezado adicional
aquí llamado Access-Control-Allow-Origin.
Así que el Access-Control-Allow-Origin como ves proporciona el coche salvaje,
que es la estrella aquí.
Lo que significa que, cualquier origen para acceder a este recurso en particular,
por lo que el servidor dice que está bien, cualquier origen se le permitirá acceder a este recurso.
Para la solicitud GET estamos contentos con eso.
Vamos ahora a iniciar sesión en el sistema, y
luego una vez que obtenemos el token, permítanme copiar el token aquí.
Y luego realizaremos una operación de eliminación en nuestro sitio de servidor.
Así que eliminaremos los platos aquí, así que
permítanme incluir el, Token en el encabezado de autorización aquí.
Y también observe que para la operación de eliminación estoy configurando el origen.
Entonces otro campo aquí llamado origen a localhost: 3343 aquí.
Entonces, indicando que esta operación de eliminación realmente está
tratando de eliminar en este origen en particular aquí.
Y así cuando realizamos esta operación así, si usted está haciendo esto desde un navegador,
el origen será establecido automáticamente por el navegador
basado en la página web desde la que se origina la solicitud.
Pero aquí, ya que estamos usando Postman, tengo que establecer explícitamente el origen aquí.
Así que permítanme enviar la solicitud con este campo de origen establecido aquí.
Y luego notaría que el campo de encabezado ahora contiene
Access-Control-Allow-Origin con el localhost: 3443 especificado aquí.
Y como notarás que este origen está en la lista blanca.
Es por eso que este Access-Control-Allow-Origin se establece
en el mismo origen que especificamos allí.
Si especifica un origen diferente, por ejemplo,
si especifica, Diga localhost: 2000 por ejemplo.
Notará que esto no tendrá, en la respuesta proveniente del servidor,
esto no tendrá el Access-Control-Allow-Origin establecido aquí.
Porque, esta dirección en particular no está en la lista blanca del sitio del servidor.
Veamos ahora un ejemplo de preconfiguración de una solicitud.
Así que para hacer eso, en el Cartero, seleccione Opciones aquí,
y luego enviemos una solicitud de preflighting
a localhost: 3443dish.
Y en el encabezado lo haremos, Ponga
el origen como: localhost3443.
Y luego esto envía esta solicitud al servidor.
Y en respuesta a esta solicitud de opciones que envió al servidor,
notará que en el mensaje de respuesta diremos 204 Sin contenido.
No hay contenido que devolver aquí.
Sin embargo, cuando nos fijamos en los encabezados del mensaje de respuesta que viene, observe que
tenemos el Access-Control-Allow-Origin que se establece en ese valor.
También tenga en cuenta que establece los métodos Access-Control-Allow.
Y aquí especifica los métodos que el servidor estará
dispuesto a aceptar en este punto final.
Por lo tanto, está informando al cliente diciendo que,
todos estos métodos son aceptables para el servidor en el punto final correspondiente.
Por lo tanto, así es como podemos hacer pre-flighting de una solicitud.
Enviando el mensaje de solicitud de opciones primero, y
luego recuperando la información del servidor aquí.
Y como recordará, esto es lo que configuramos en la
parte de opciones de cada uno de los puntos finales del enrutador.
Así que así es como podemos configurar nuestro módulo de nodo de coches y
luego configurar nuestro servidor para responder con varios mensajes de encabezado.
Con esto completamos este ejercicio.
En este ejercicio hemos visto cómo podemos configurar nuestro servidor para poder
enviar varios encabezados relacionados con el curso en el mensaje de respuesta
usando el módulo de nodo del curso.
Con esto, completamos este ejercicio.
Este es un buen momento para que hagas un comentario de GIT con el curso de mensajes.
[ MÚSICA]