Angular 2 práctico: Sitio de consumo de videos

Encabezados correctos para CORS

¡Prueba gratis durante 10 días

nuestros 1197 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este curso usaremos una API básica para intercambiar datos, 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 habilitarlo.
05:59

Transcripción

Cuando queremos compartir archivos e información dentro de un servicio en PHP, vamos a necesitar darle un formato especial. Acá tengo un archivo llamado "lista-de-videos.php" donde estoy obteniendo información de una base de datos y la estoy devolviendo en un formato JSON. Vamos a revisar el resultado. Acá, básicamente estoy tomando la información que se encuentra en una base de datos y la estoy devolviendo en un formato neutro que puede ser utilizado dentro de diferentes servicios, por ejemplo, JavaScript o incluso PHP. Sin embargo, a la hora de compartir esta información, es posible que tenga algunos problemas. Debemos darle el formato correcto y, para eso, necesitamos incluir algunos elementos de "headers". Específicamente vamos a darle los "headers" que sean compatibles con el formato CORS. El formato CORS viene de las siglas en inglés "Cross-Over Resource Sharing". (sic) Esto significa que vamos a poder compartir a través de diferentes medios los archivos o la información que se encuentra dentro de este servidor. Primero, para habilitar el CORS vamos a definir que puedan acceder nuestra información desde diferentes orígenes. Así que, vamos a incluir "header", este es un comando especial de PHP, que va a enviar información al inicio del documento o, incluso en algunos momentos, antes de que podamos ver el documento servido. Acá vamos a definir un valor que va a ser, vamos a ponerlo acá, "Access-Control-Allow-Origin". Esto, básicamente, nos va a permitir a nosotros acceder la información desde otros servidores. En este caso, yo estoy definiendo el valor asterisco. Esto significa que puede acceder la información cualquier servidor, tanto local como externo. Si, por ejemplo, quisiera que únicamente un servidor en particular tenga acceso a mi información debo poner, por ejemplo, "servidor.com". Esto le va a dar acceso a la información de este documento únicamente a "servidor.com". Por ahora, y para mantener el ejemplo sencillo y que puedas trabajar con los archivos en tu ordenador, vamos a dejarlo con el valor "asterisco". También vamos a permitir que puedan acceder a la información utilizando diferentes métodos. En este caso, estoy validando la información para que se muestre únicamente por el valor "get", pero también, si yo quisiera, puedo definirlo por diferentes métodos. Esto lo vamos también a definir a través de un "header". Pero, en este caso, vamos a poner otros valores. Vamos a cerrar con paréntesis y vamos a definir el valor "Access-Control-Allow-Methods" y esto nos va a permitir que podamos mostrar la información que está acá y que tengan acceso otros servidores si nos llaman a través de los métodos GET, POST y OPTIONS. Vamos a poner acá punto y coma. Finalmente, una vez que estamos dando permisos también tenemos que definir el formato del archivo. En este momento estamos definiendo el archivo en un formato por defecto. Dependiendo de la configuración del servidor puede ser HTML o puede ser un archivo de texto. Nosotros estamos dando el resultado de este documento en un formato JSON. Entonces, vamos a definir dentro del servidor que el resultado que nosotros damos dentro de este documento también sea en formato JSON. Para eso llamamos también un "header" y el valor que va a tener acá va a ser el tipo de documento. Vamos a decir qué valor va a tener este documento. Vamos a definir que sea "Content-Type" o que el tipo del contenido que vamos a servir, en este caso, va a ser tipo JSON. Estos son los encabezados o "headers" de JSON, son completamente estándar, puedes utilizarlos exactamente con estos mismos nombres. También, en caso de que te interese el tema de CORS para habilitar los permisos dentro de un servidor, te voy a mostrar un servicio que nos ayuda a buscar la configuración correcta de acuerdo al lenguaje de programación o la plataforma en la que trabajas. Acá puedes encontrar, por ejemplo, todos los recursos para configurar tu servidor. En este caso, por ejemplo, si quieres configurar el servidor Apache que estamos trabajando en PHP. Si quieres configurar, por ejemplo, tu servidor directamente la configuración de Apache o el servidor, para que en todos los archivos se incluyan automáticamente estos encabezados. También lo puedes hacer del lado del cliente y puedes encontrar bastantes recursos en la página "enable-cors.org". Ahí está toda la información necesaria para que puedas compartir los archivos. En caso de que no lo utilizáramos de esta forma, lo que sucedería es que cuando tratamos de invocar la información desde, por ejemplo, un archivo de JavaScript vamos a obtener un error, aunque estemos mostrando la información correctamente nuestro navegador no va a poder accederla porque no tiene los permisos necesarios. Veamos ahora, el resultado final de nuestro documento que se va a ver exactamente igual. Sin embargo, ahora estamos dando los permisos necesarios y los encabezados para que en caso de que algún código quiera accederlo. Vamos a ver el código fuente de la página, es exactamente igual a lo que estábamos trabajando sin embargo, ahora tenemos todos los permisos y lo estamos dando en el formato correcto para poder dar una información utilizando buenas prácticas.

Angular 2 práctico: Sitio de consumo de videos

Aprende a crear un sitio web de consumo de vídeos con Angular 2, desarrollando el back-end y conectando con el servidor local, terminando por la personalización del reproductor.

2:41 horas (26 Videos)
Actualmente no hay comentarios.
 
Formadores:
Fecha de publicación:12/04/2017
Duración:2:41 horas (26 Videos)

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.