Angular 2 avanzado: Trabajo con APIs

Habilitar CORS en Express.js

¡Prueba gratis durante 10 días

nuestros 1272 cursos !

Prueba gratis Mostrar modalidades de suscripción
Una API usualmente está planificada para intercambiar datos entre servidores, sin embargo la configuración de seguridad de los navegadores no permite conectar información entre servidores distintos sin antes confirmar datos desde el servidor. La configuración de CORS permite habilitar el libre intercambio de datos, y en esta lección aprenderemos a hacerlo.
05:15

Transcripción

Cuando creamos una API, muy posiblemente vamos a necesitar que la información se consuma en otro servidor. Pensemos, por ejemplo, que estás desarrollando una API para que las personas puedan acceder a información de tu empresa. Eso significa que personas de otros servidores posiblemente se conecten a tu API para consumir esta información. El problema está en que si no defines correctamente los permisos de envío de la información, muy posiblemente los usuarios no van a poder consumir los datos, debido a problemas de seguridad en el navegador. Para evitar este problema, nosotros utilizamos un mecanismo llamado CORS, viene de la siglas en inglés "Cross-Origin Resource Sharing". Esto es algo que nos permite a nosotros consumir información entre diferentes servidores y diferentes orígenes. Así que para habilitar el CORS dentro de esta aplicación, vamos a entrar a la página: enable - cors. org, donde vas a encontrar información sobre cómo habilitar la técnica CORS dentro de prácticamente cualquier tipo de servidor. En este caso, nosotros lo vamos a habilitar para el servidor trabajando en Node con Express. js, que es el que estamos trabajando en esta aplicación. Yo voy a copiar este código que está acá y voy a ir a la aplicación y nada más voy a pegarlo. Ahora te voy a explicar qué es lo que estoy incluyendo acá. En este primer "header" o encabezado del documento, que es una información que se incluye dentro del documento pero no es visible para el usuario, en esta primera línea yo estoy definiendo que esta aplicación le estamos dando permisos para que pueda ser accedida desde cualquier parte en Internet. Estoy definiéndolo así porque incluyo el carácter asterisco. Si yo quisiera restringir el acceso únicamente a un dominio, puedo poner: "dominio. com" y ahora mi aplicación solamente se puede acceder desde el dominio que acabo de difinir "dominio. com". También podemos definir los "headers" que vamos a permitir, en este caso estamos definiendo los "headers" básicos que vamos a aceptar. Con esto, nosotros ya le estamos dando compatibilidad a nuestra aplicación para que pueda ser accedida desde diferentes servidores y que podamos trabajarla con diferentes tecnologías, en especial cuando estamos trabajando con Angular, para poder consumir los datos que se encuentran en este servidor desde cualquier parte de Internet. También podemos agregar dentro de nuestro servidor un paquete adicional que nos va a permitir a nosotros tener acceso a todos los encabezados de CORS y hacerlos mucho más sencillos de trabajar. Yo acá estoy trabajando mi servidor dentro de la consola, así que voy a detenerlo presionando en el teclado Control + C, presiono la tecla S para aceptar que se detenga y voy a escribir "clear" para que sea más fácil de leer. Ahora voy a instalar un paquete adicional llamado CORS. Esto lo voy a hacer con el administrador de paquetes de Node, así que vamos a escribir "npm install cors" y para guardarlo dentro de nuestro archivo'package. json' vamos a escribir "-- save". Esto va a guardar la configuración de este paquete que vamos a instalar. El paquete que estamos instalando nos va a permitir a nosotros instalar y administrar de una forma muy sencilla los encabezados de CORS. Nos va a ayudar particularmente en las llamadas más difíciles, por ejemplo, no todas las llamadas se manejan igual, las llamadas "get" y las llamadas "post" son bastante sencillas de manejar y prácticamente todos los servidores y todos los navegadores las soportan, pero llamadas un poco menos comunes, como por ejemplo "delete", necesitan configuración adicional. Si nosotros agregamos y configuramos este paquete vamos a tener la configuración inmediatamente dentro de nuestro documento sin tener que hacer mayor detalle. Una vez que ya lo tenemos listo, vamos a volver a ejecutar el servidor, en este caso estoy utilizando Nodemon para que se realice la actualización inmediatamente, y para tener acceso al paquete que acabamos de instalar tenemos que ir al inicio de nuestra aplicación, donde estamos importando paquetes. Vamos a importar, en este caso CORS, así que vamos a poner "var", vamos a definir "cors" es igual a "required". Como estamos importando los demás módulos dentro de nuestra aplicación y dentro de CORS, voy a definir un parámetro y vamos a definir que importe "cors". Y una vez que ya lo tenemos importado y funcionando dentro de nuestra aplicación, vamos a utilizarlo de esta forma: "app", llamamos a la instancia en nuestra aplicación, le damos la instrucción de que utilice, con el comando "use", y le definimos que use "cors". Ahora ya vamos a tener todos los encabezados perfectamente funcionando dentro de nuestra aplicación y le vamos a poder dar soporte a todos los diferentes métodos que tenemos dentro de HTTP y así vamos a poder servir sin ningún problema una aplicación RESTful.

Angular 2 avanzado: Trabajo con APIs

Comprende el funcionamiento de una API y cómo llevar a cabo sus procesos, así como controlar su funcionamiento mediante Angular 2, gracias a este ejemplo práctico.

3:02 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:4/05/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.