SOLUCIÓN de CORS y Desarrollo de API REST con Express

esta sería la tercera clase Aunque hoy vamos a estar haciendo desde cero nuestra primera Api Rest te voy a explicar Qué es una Api Rest Porque es diferente a cualquier Api la vamos a estar creando los problemas que nos podemos encontrar vamos a hacer validaciones vamos a estar devolviendo diferentes casos te voy a explicar una forma de validar de forma bastante creo que fácil y correcta las cosas como separar esas validaciones también vamos a ver el temido problema de Kors que a todo el mundo todo el mundo Yo creo que es una de las preguntas

más repetidas en el mundo de la programación y desarrollo Por qué no me funciona el Kors fijaos una cosa y hace relativamente hace poco puse en linkedin en Twitter una pieza donde explicaba el problema de Kors y tenía un montón de gente que me estaba echando hate el Yo decía que no era correcto que no se arreglaban el backing que no sé qué pues hoy lo voy a demostrar hoy lo voy a demostrar y hoy Vais a ver y Vais a entender cuál es el problema de Cos cómo se soluciona cómo funciona y por qué

no es tanto problema vale hoy vamos a utilizar este de aquí que se llama FL 0 Por qué Porque este sí que tiene un free tier al menos de un proyecto que algo vale un proyecto totalmente gratis Que obviamente pues tiene algún tipo de limitaciones de memoria Y tal Pero no tiene limitaciones de cuánto tiempo puede estar encendido el servicio O sea que puede estar encendido 24/7 y además sin ningún límite de transferencia que lo pone aquí tiene bastante buena pinta lo vamos a hacer desde cero y lo más importante que lo que está diciendo

feral No pide tarjeta de crédito que sé que es una cosa que muchas veces os Echa para atrás con razón de tener que meter la tarjeta de crédito para el free fire en este caso no lo hace no lo pide lo sé porque yo me he registrado y no lo y no lo pide y luego lo vamos a estar probando lo vamos a hacer y todo esto Me gustaría ver las config en acción vamos a ver una configuración de kos porque vamos a hacer el cors nosotros desde cero vale para que lo entendáis bien si

os habéis perdido alguna clase de este curso de nugge si queréis aprender nauji es desde cero ves clase 1 clase 2 clase 3 todas estas clases estamos poniendo aquí y aquí tenéis todos los vídeos de las clases con Introducción a no Yes y sus módulos creamos una Api desde cero y hoy la Api Rest va Aquí tenéis el repositorio fijaos que ya tenemos la clase 3 aquí preparada y en la clase 3 he puesto un archivo movies punto Jason voy a abrir ya este pedazo de repositorio aquí en la clase 2 lo último que hicimos

es que estuvimos trabajando con Express no y en Express creamos un servidor web os expliqué Cómo crearlo paso a paso importar la dependencia que podíamos traer Jason y devolverlo archivos estáticos podríamos desactivar la cabecera del ix Power que ya dijimos que por un poquito de temas de seguridad era importante vale vimos Cómo podíamos escuchar el body o sea recuperar los datos cuando se hacía un post en nuestra app en nuestro backen y luego lo simplificamos gracias al maidelware de express.json no y lo explicamos paso a paso y tal y lo dejamos un poquito aquí es

verdad que hicimos un poquito eso expliqué también un poco los maidelwers y todo esto pero no llegamos a hacer una Api Rest Así que hoy vamos a hacer una Api Rest basado un poquito en esto vamos a empezar nuestra Api Rest paso a paso uno tras otro si os parece Yo creo que lo primero que podríamos hacer Sería más bien empezar con nuestro servidor Así que vamos a empezar aquí en la clase 3 para que así la gente además que por lo que sea no estuvo Pues mira que pueda reengancharse no cómo creamos nuestro primer

servidor Bueno pues lo que he dicho antes Express Express utilizamos require porque por ahora Estamos utilizando como un Yes pero ya os informo la siguiente clase vamos a pasar a utilizar en masking modules y os explicaré algunos de los problemas y retos que podemos encontrar pero que vale la pena porque yo creo que es lo que hay que utilizar ahora Vale entonces constante app Express creamos nuestro Express y aquí le decimos que vamos a utilizar bueno Esto no necesitamos Así que no lo vamos a poner No necesitamos por ahora lo que voy a hacer es

que desactivemos el power by vale esto quita exacto deshabilita el header X Power bi Express esto es una cabecera que cuando tú haces una petición a esta Api aparecerá es como una forma de hacer publicidad gratis de Express es como cuando te compras una camiseta de Nike y aparece aquí el logo de Nike en grande pues esto básicamente lo mismo y se puede desactivar con Nike no lo puedes hacer lo primero pues ya podríamos decirle Oye cuando se haga el método get en la raíz pues vamos a contestar vamos a ejecutar este callback y ahora

pues nada fácil vale vamos a poner aquí Hola mundo ya está vamos a escuchar en el puerto que sea el process.port o si no vamos a ponerle por defecto un dos tres cuatro le puedes poner el que tú quieras y vamos a escuchar que nuestra aplicación escuchen este Puerto y aquí el típico mensaje de servidor escuchando en el puerto tal tal con esto ya tienes tu Api Pero obviamente ahora tenemos que hacer unas cuantas cosas Mira vamos a levantarla Vámonos a clase clase 3 vamos oficializar el proyecto Porque fíjate que aquí en clase 3 no

tenemos un packa Jason verdad voy a hacer un Empire init menos it y ahora sí pues puedo hacer aquí en pie mistol Express menos e vale para que nos instale la versión exacta si no le pones nada pues te va a poner el caret que ahora te enseñaré lo que es Y si le pones menos e no te pone el careta Mira el packa Jason Ves Ahora me ha instalado aquí la dependencia Y fíjate que no me ha puesto el cosito esta cosa Esto se le llama a este símbolo se le llama care entonces este

caret tiene implicaciones de la versión que instalaría y nosotros normalmente vamos a evitar ponerlo Así que pum lo dejamos así Si queréis que esto lo haga automáticamente pues ya sabéis menos e mayúscula para poner la versión exacta ahora que ya tenemos esto Pues nada Note con el watch que esto lo aprendimos a una de las clases y aquí pues vamos a levantar app.js todo veis ya se ha levantado nos da el Warning la advertencia de que el modo watch es experimental aunque ya os digo que le queda muy poco de experimental y yo lo recomiendo

porque Funciona muy bien y ya escuchando en el puerto 1 2 3 4 ya lo sabéis no todo esto lo tenéis bien sí bien hoy amigos y amigas vamos a hablar y vamos a crear una Rest Api que es una resta Api para que todo el mundo lo sepa Rest es el acrónimo de repres representational State transfer y Rest es una arquitectura de software importantísimo tener en cuenta que es una arquitectura de software no es un framework no es una biblioteca no es una idea no es un patrón es una arquitectura vale una arquitectura de

software se diseñó en su día para sistemas de comunicación en redes especialmente aplicaciones web y nació el año 2000 vale el año 2000 por roi fielding Y entonces se ha utilizado para muchas cosas pero especialmente esto sería Rest vale esto sería Rest más que restripe esto sería el Rest vale Y dónde se ha utilizado este tipo de arquitectura ante mucho mucho mucho mucho mucho Bueno se ha utilizado para sobre todo construir apis Y a partir de aquí pues hemos tenido la Rest apias vale Pero al final como son comunicaciones en redes podríais entender que el

tipo de comunicación y los principios en los que está basado la escalabilidad vamos a hablar de resta y todo el rato para no liarla y vamos a poner aquí que Rest que es una arquitectura de software vamos a redondear esto y vamos a poner los principios en los que se basa Rest por ejemplo la escalabilidad simplicidad visibilidad portabilidad y la fiabilidad me falta uno bueno que sería la modify fácil de modificar normalmente todas las arquitecturas de software hay mucha gente que a lo mejor no sabe que el resto es una arquitectura de software Pero todas

las arquitecturas de software responden a crear a base de unos principios no la idea de poder crear algo que pueda sostenerse en el tiempo de la mejor forma posible vale Y simplificar el desarrollo de esa pieza de software para eso son todas y cada una de las arquitecturas del mundo vale todas aventuras están basadas en esas ideas en ideas de Oye vamos a tener una serie de principios y vamos a tener unos fundamentos que hay que seguir para poder conseguir utilizar esta arquitectura Hay un montón de arquitecturas que seguramente luego iremos viendo patrones y arquitecturas

para que os deis a la idea pero vamos a ver Cuáles son los principios fundamentales de resto para considerar que estás utilizando red lo primero cuando estamos hablando de res eso Serían como los principios pero Cuáles serían los fundamentos vamos a hablar de resources vale en español sería recursos vamos a hablar de recursos y los recursos que lo vamos a ver luego en código O sea que no No te asustes vale los recursos en Rest en una arquitectura red todo todo es considerado un recurso que puede ser una entidad concreta yo que sé por ejemplo

un usuario o un libro una publicación de un blog una imagen un recurso puede ser algo o puede ser una colección de estos recursos puede ser una lista de usuarios una lista de libros una lista de lo que sea recurso Y esto es súper importante cada recurso se va a identificar con una URL Y esto es súper importante y lo vamos a ver luego cuando veamos el código todo esto lo Vais a ver más claro pero es importante un poquito de lógica de teoría para que entendamos después vale entonces los recursos que recursos se identifica

con una URL y ya os digo que en redes todo está considerado como un recurso que pueden ser entidades concretas o colecciones de entidades luego tendríamos otro fundamento y el otro fundamento serían los métodos o los verbos en este caso vamos a estar hablando más de resta y así que vamos a hablar de verbos http vale los verbos que ya vimos el otro día get post delete Patch y todo esto no que son los que se utilizan para definir las operaciones que se pueden realizar con los recursos para definir las operaciones que se pueden realizar

con los recursos ya podéis imaginar que lo que vamos a querer es crear no estos verbos normalmente representan las acciones básicas de un crud que es crudo significa create y delete no crear leer actualizar y eliminar esto lo que te permite es que las aplicaciones puedan de alguna forma pues interactuar con estos recursos otro fundamento tendríamos la representaciones la representación es Qué quiere decir es muchas veces la gente se confunde ante la idea de que las apis las todas las apis tienen que ser Jason y eso no es así vale no es así hoy lo

vamos a ver así lo vamos a seguir así pero lo cierto Es que algo muy importante para el tema de seguir una resta Y es que los recursos pueden tener múltiples representaciones Y entonces podemos tener la representación que sea así con Jason esto podría ser pero podría ser xml html etcétera no O sea el cliente debería poder decidir la representación del recurso o sea los recursos se pueden presentar en diferentes formatos no debería estar atado a uno en concreto Pero bueno ya entendemos y es normal totalmente no que la representación es pues al final si

vas a utilizar Jason solo hagas Jason pero lo cierto y lo importante es que esté de alguna forma totalmente separada la representación del propio recurso O sea si el recurso que el recurso no sea per se un Jason sino que lo puedas representar de diferentes formas de otro fundamento muy importante es que sea statestles es que cada solicitud que tú haces al servidor debe contener toda la información necesaria para entender esa solicitud Qué quiere decir que el servidor no debe mantener ningún estado sobre el cliente entre solicitudes esto es otro error que he visto muchas

veces y entonces ya no está siguiendo la arquitectura de res esto lo que quiere decir es que el servidor no puede no puede Ni necesita ni tiene que hacer nada Que guarde información para poder saber responder qué tiene que decirle al Cliente por ejemplo no puede guardar cuantas llamadas se han hecho si tiene que paginar o no tiene que imaginar No esa información Siempre tiene que ir en la URL en la petición que le estamos haciendo para que el servidor sólo con esa URL ya sepa lo que tiene que hacer no tiene que tener un

estado Esto es algo que muchas veces hacemos de forma automática para bien pero es fácil a veces cometer el error de guardar algún tipo de estado para que nos ayude Y tal Pero entonces estamos justamente ya rompiendo los principios de la resta y súper importante que lo entendáis vale el cliente debería siempre enviar toda la información para procesar la request vale el servidor no necesita tener ningún tipo de estado para procesar la riqueza que esto no quiere decir que no tenga base de datos o todo este tipo de cosas vale eso significa que no puedas

tener una base de datos donde guardar información lo que quiere decir es que nuestro backen no debe guardar información para saber cómo tiene que contestar estas riqueza y finalmente tendríamos esto tampoco pasa nada os lo puedo comentar también el tema de que tenga una interfaz uniforme no que la interfaz entre cliente servidor tiene que ser consistente y uniforme para todas las interacciones Que obviamente o sea es importante es importante pero esto es muy difícil que lo que lo rompamos básicamente que nuestra URL siempre tienen que hacer lo mismo siempre se tiene que llamar igual y

a todo esto otra cosa en la que está en la que está esto sustentado y es muy importante porque muchas veces me comentáis Y esto es para Juniors también que yo no entiendo esto que la gente dice no sé qué separación de conceptos esto es otro Pilar de res no o sea los componentes del cliente y del servidor están separados entre sí permite que cliente y servidor evolucionen de forma separada Así que esto Serían como todos los fundamentos que deberíamos tener con nuestra nuestra resta ypi en lo que se fundamenta vale como las tenemos que

construir tendríamos aquí un poco lo que es arquitectura de software cuando nació las palabras clave los fundamentos de cada una y en lo que se sustenta y son estos estos seis Pilares que se sustentan la resta y ya no tenéis excusa ya sabes cómo funcionan las redes Qué es lo que tiene que cumplir y muchas veces tened en cuenta una cosa que es súper importante vale a veces puedes hacer una Api que no sea Rest puede ser vale lo digo porque hay gente que está encabezonada en que todas las apis son Api res y no

lo son vale no lo son hay veces que puedes crear una Api que no sea Rest hay otras tipos de arquitecturas otras soluciones tienes soap o tienes cosas que ni siquiera son swaps puede ser que tú hagas una una llamada a un sitio vale Sí como Pues así como que hay un montón de apis que no tienen por qué seres una Api puede ser una Api y punto no tiene por qué serres es que hay un error muy común en la que mucha gente cuando ya hace una Api que devuelve Jason le llama Api Rest

y ya está sabes y no es así obviamente tenéis soluciones tan interesantes como Craft Aunque es un lenguaje en realidad de hacer consultas las apis que puedes crear no son restrings verdad que no te pone acuario Language for your restau y que también lo puede ser o sea Hay un montón de formas de hacer apis que devuelva Jason que no son restripe ahí vale muy bien Pues venga vamos al código y vamos a volver si os parece a este proyecto vamos a hacer primero los gets Ya vimos en la siguiente en la clase anterior que

podíamos hacer aquí un Api punto http y gracias a esta extensión que tengo por aquí que se llama resplan gracias a estas tensión esta extensión es muy chula te recomiendo un montón ahora que vamos a estar trabajando un montón creando apis y tal esta extensión lo que te permite es tener un archivo terminado con http vale Y aquí podríamos poner recuperar todas las películas vale Y aquí vamos a hacer un get de http localhost un dos tres cuatro barra movies y aquí ya podríamos enviar la request Aunque Obviamente que vamos a ver pues que esto

nos está devolviendo en 404 porque no hemos creado esta ruta vamos a crear algunas rutas Vale y las vamos a ir haciendo y os voy a ir explicando un poco Cómo encaja con el tema de resta aquí una película por ID vale vamos a poner http local Host 234 movies vale Y aquí tendríamos la idea vamos a poner uno por ahora y aquí podríamos recuperar todas las películas por un género get http localhost imaginemos movies vale aquí esto es bastante interesante Porque fíjate como me ha hecho el auto complete me lo ha hecho así no

o sea esto está bien porque estaría siguiendo el tema de que todos son recursos los géneros podrían ser recursos Porque podríamos recuperar todos los recursos hay diferentes estrategias para hacer esto y dependiendo del nivel de filtros que quieras hacer Hay veces que vas a querer utilizar directamente cueri params no Y para recuperar géneros a lo mejor no lo ves como un recurso sino que solo lo ves como un filtro Y seguramente puede tener sentido hacerlo así Pero bueno ya veis que hay diferentes estrategias y no es que haya una buena y una mala no hay

ninguna perfecta porque todo depende de cómo tú entiendas que son entidades y recursos A qué es lo que crees que son filtros y cuáles son los que crees que no lo es y muchas veces depende más de la lógica de negocio más del producto porque no es lo mismo en un producto una moneda por ejemplo un coleccionista de monedas va a pensar que una moneda tiene un identificador es una entidad dentro de su negocio pero seguramente para una tienda online de camisetas le da igual la moneda que sea mientras sea dinero y por lo tanto

lo único que le importa esa moneda es el valor Ya ves la diferencia entre un coleccionista de monedas que cada moneda va a tener una idea un tal una persona que lo único que quiere del dinero es el valor No ya veis la diferencia pues este tipo de cosas son muy comunes y por lo tanto hay veces que podemos entender entidades de forma distinta vale yo lo voy a poner aquí como cueri paran Porque además me ayuda a también explicaros alguna forma de algunas cositas y lo que vamos a estar creando de esta resta y

fijaos es este Books punto Jason este Books es movies punto Jason Perdón aquí tenemos diferente información tenemos películas con título año director duración y esto la semana que viene lo vamos a volcar a una base de datos y todo lo que hacemos hoy vamos a pasar para que funcione con base de datos vale Así que esto es lo que vamos a estar sirviendo creando modificando y todo esto vamos a crear esto de recuperar todas las películas fácil qué tenemos que hacer pues vamos a hacer a punto get barra movies no porque cuando queremos acceder hemos

dicho fijaos esto tenemos los recursos y cada recurso se identifica con una URL Cuál es la url que queremos identificar pues barra movies Así que ahora ya sabemos que todos los recursos que sean movies se identifica con barra Movies o sea ya tenemos una URL que identifica a este recurso en concreto Si queremos recuperar las películas vamos a hacer barra movies y Aquí vamos a responder que cuando pidamos esto pues nada más que el Jason de esto vamos a importar el movies punto Jason y lo único que tenemos que hacer aquí por ahora fácil es

devolver todas las películas Así que hacemos un resto Jason movies con esto al menos ya tendríamos este de aquí no fácil este fácil ves ya hacemos la request y ya nos está devolviendo aquí todo el Jason con toda la movie digital como hemos visto en realidad la representación ese cliente debería poder decir la representación del recurso yo esto la verdad lo he visto muy pocas veces pero es verdad que alguna vez lo he visto pero no hay que entenderlo como que siempre podría hacerlo aunque no sería imposible o sea podríamos siempre poder escuchar aquí yo

que sé y esto sí que lo he visto en alguna Api donde podamos leer el cuero y param de output o de format vale Y en el de formato aquí podamos decir vale si el formato es html pues vamos a devolver en lugar de esto vamos a devolver la lista como un html si esa que xml pues vamos a transformar el Jason y tal Sí que lo he visto en algunas apis pero para apis internas y tal no lo he visto tanto y aún así me parece un poco muy estricto hacerlo porque al final si

solo te interesa Jason creo que tampoco pasa absolutamente nada vale pero para que te hagas un poquito la idea ya tendríamos el primero recuperar todas las películas ahora recupera una película por ID Pues aquí vamos a ver una cosa muy interesante sobre no Yes que además pues está bien que entiendas y que y que veas no a ver voy a quitar esta que está no no añade nada ya hemos creado un en Point que un en Point para que sepas sería una un pas en el que tenemos un recurso no un en Point las apis

tienen diferentes urls a las que podemos llamar para extraer información se le llaman en points justamente porque es el final de la Api a la que vamos a poder acceder para recuperar esa información Así que esto ya sería el empain para el get vale con el verbo get para recuperar una película podemos utilizar a punto get barra y creamos un nuevo en Point barra movies barra dos puntos y d y vamos a ver esto porque esto es una de las magias más importantes de paz de The Express esto que estamos haciendo aquí a esto se

le llama que es como un segmento Dinámico y son los parámetros de la URL Qué significa esto de ser un parámetro de la URL es completamente normal que muchas veces si vamos a una página web por ejemplo esta no vamos a mi duda Vale cuando vas a mi duda y entras a un artículo Fíjate que esta parte de aquí siempre tiene que ver con el artículo veis que es el artículo Entonces esto de aquí podríamos entender que es el ID del artículo vale No sé si lo veis pero lo hago así de pequeño y desde

el artículo es el id que identifica a este artículo Y claro no podemos poner manualmente aquí todas las ideas porque no las sabemos antes de su creación y la acidez pueden cambiar y tal Y además necesitamos de alguna forma capturar esa idea para poder acceder a ella después todo lo que le estamos diciendo aquí a Express es básicamente Oye en barra movies barra aquí le vamos a pasar una idea y además quiero después poder acceder a ella Poder escucharla o sea poder recuperarla leerla y todo esto no y cómo lo podemos hacer pues una vez

que ya hemos hecho esto este segmento Dinámico que además podéis poner más aquí podéis más aquí otro vale Y lo que podéis hacer aquí al recuperar sería así de la request en los parámetros recupérame y ve más y otro Y fíjate que el nombre tiene que ser el mismo o sea si aquí le ponemos idea cuando queramos recuperar esta idea Ese es el nombre si has utilizado nexx.s y cosas así esto te sonará y de hecho nexi es está utilizando esto por debajo cuando estáis utilizando la estructura de carpetas con los archivos el nombre entre

corchetes por debajo en 10 está utilizando esta magia Así que es importante el nombre que le ponemos aquí son nos está interesando la ID Entonces al principio he hecho he puesto esto que pone paz te voy a explicar esto porque esto es súper importante también es súper súper súper importante y es que qué pasa que aquí en realidad también podemos poner raguez que pudiese capturar las partes de la URL vale podríamos ponerla directamente igual que se podrían poner un montón de cosas pero qué pasa que la regué son muy muy complicadas muy difíciles de hecho

lo puedes hacer puedes hacer así puedes si te puedes quedar súper a gusto y lo puedes intentar vale es un rollo sobre todo cuanto más dinámicas son las urls más pueden cambiar por suerte Express uso usa y popularizó esta biblioteca que se llama paz que al final es una biblioteca que han utilizado un montón de bibliotecas en el mundo como por ejemplo real router a día de hoy ya no la USA porque utiliza su propia solución pero real router y un montón de routers del mundo se basan en muy antigua pero es una idea brillante

porque lo que te hace es convertirte paz que son normalmente muy complicados te los convierte automáticamente en expresiones regulares para que tú no te tengas que preocupar de esa complejidad ves por ejemplo aquí tendrías este pack to reggaeks tú le pasas un Paz donde le pones aquí los dos puntos bar para que capture este bar y fíjate en que lo está transformando este sería el reggae donde está transformando todo esto claro no es realista en el que tú estés constantemente haciendo cosas así así que esto por debajo hace esta magia para que nos simplifique cómo

lo vemos sea mucho más entendibles Aunque por detrás esté utilizando La magia de las redes pero lo mejor es eso que no necesitas utilizar cosas muy chulas Como por ejemplo puedes utilizar aquí ave más CD y este ave más CD esto lo que va a hacer es decir Vale pues Esto será abcd a bbbcd abbbbbcd esto lo que quiere decir este más es que puede ser la B puede ser una vez o más no puedes hacer también yo que sé en lugar de esta puedes utilizar e interrogante esto quiere decir que la B puede estar

o puede no estar Y fíjate que se lee Uy se lee mucho más fácil que a lo mejor poner una reggae que lo podría complicar un poco vale incluso puedes hacer también pues aquí decir que si puede ser una de las dos vale Y esto Pues podría ser ave no porque como es opcional o a b c d por ejemplo pues aquí lo tendrías a bueno perdón se me ha olvidado esto se me ha olvidado esto O sea que es una mezcla entre reggae pero de forma más fácil no estamos diciendo aquí Oye este grupo

es opcional entonces funciona con esto y con esto nosotros no vamos a utilizar nada de esto pero bueno es solo para que quiero que lo sepas y por supuesto de nuevo que muy poca gente lo sabe Pero aquí puedes utilizar reggae si quieres o sea podríamos decir todo lo que termina con punto deb No y esto pues por ejemplo la barra miduder todo esto vale esta ruta funcionaría y con todas estas rutas que terminen así pues entraría por ejemplo para que lo sepas que en Express podéis poner rutas que sean reggaeds eso lo soporta sin

ningún tipo de problema en este no lo vamos a utilizar vamos a utilizar movies con el dos puntos vale con el segmento que también nos lo transformar la ID y así ya lo tenemos afecta mucho el performance de la apio usar Rex en las rutas esto te lo transforma en un Rex muchas veces el problema que puede pasar es haber hecho una mala reggae si haces una mala reggae Entonces sí que es verdad que puedes tener problemas de rendimiento y por eso muchas veces estoy de acuerdo que no recomiendo que hagáis manualmente normalmente siempre que

podáis utilizar pack to Rex mejor eh Ya tenemos la idea Pues ahora lo que tenemos que hacer es recuperar la película si conocemos movies punto fine y de la película movie punto ID vamos a ver si encontramos la película a través de esa idea No si tenemos la película Pues nada devolvemos Jason movie y si no la tenemos pues importante lo que vimos el otro día 404 no se encuentra el recurso y por lo tanto muy bien not Found vale le tenemos que informar al usuario que no hemos encontrado vamos a probar ahora nuestro en

Point que hemos creado ahora para recuperar una película vale vamos aquí recuperar una película Send request vale moving of Found porque le he pasado la idea 1 y seguramente si miramos Aquí vamos a recuperar la película de dark knight de Batman ahora que tenemos esta idea se enriques y ahora ya podemos ver que sí que ha recuperado perfectamente a Bruno Díaz Vale ahora necesitaríamos lo de filtrar por género no en la tercera tenemos recuperar todas las películas por un género es muy normal que al final nuestros recursos queramos filtrarlos por diferentes cosas puede ser paginación

que eso te lo voy a dejar como ejercicio porque lo veremos más adelante Pero creo que es una cosa que podrías hacer ya perfectamente en javascript paginación puede ser para filtrar por género por palabra un montón de cosas entonces aquí en este caso tenemos un filtro un filtro que nosotros estamos pasando como una String Cómo recuperamos esta Core Stream pues vamos a verlo porque para esto Express es una maravilla como puede ver el recurso que estamos utilizando es el mismo que utilizamos para recuperar todas las películas solo que ahora queremos filtrar por un género en

concreto vale si hacemos un semriques no sé si hay alguna película de terror igual no lo hay Ah mira voy a poner Aquí esta de syfy vamos a poner la de action vale para filtrar por acción Claro si ahora utilizamos la re:co es funcionar funciona pero fíjate que esta que es de drama no me filtrado O sea la ha dejado ahí lo que vamos a necesitar es modificar nuestro primer en Point vale de las movies que vamos a hacer aquí Vale pues primero vamos a recuperar el género desde la cueri en la request podemos acceder

a la propiedad QR y en la cueri tenemos un objeto donde ya están transformados todos los cueri params en un objeto o sea que cualquier cosa que le pasemos aquí por ejemplo le podemos pasar Search y aquí pues Matrix pues este Search ya lo podríamos recuperar aquí directamente esto es una maravilla te simplifica un montón en la vida está genial es de estas cosas que tiene Express como framework de The note que es que te simplifica la vida vale en este caso solo voy a hacer el de género pero te invito como ejercicio que tú

lo lleves a otro nivel lo que le podemos decir es que si tenemos género vamos a filtrar por el género y para filtrar por el género pues podemos hacer un filter movies vale donde movies bueno movies punto filter vale para cada película las películas vale aquí pone esto aquí pone esto que movies mundo filter Y tal Pero esto es porque hija copylon no tiene ni puñetera idea no tiene ni idea Porque si miramos nuestra Api fijaos que el género es una Rey vale por eso muchas veces os digo que tener vieja capa y lo te

está bien pero esto no Jauja vale Esto no es esto no Jauja vale No es magia negra y aquí lo podemos ver No aquí se está equivocando Esto no es lo que tenemos que hacer de hecho lo que deberíamos hacer Sería más bien filtrar y ver si el movie o Jenner include no se incluye el género que le estamos pasando tendríamos que hacer algo así yo lo voy a hacer un poquito mejor no esto funcionar funcionaría si le pasamos exactamente si le pasamos exactamente el filter movies vale así Si le pasamos exactamente como está escrito

ves este action ahora debería funcionar vale ves action este es action también action esto ha funcionado nos ha filtrado esas películas que sólo son o el género tienen action vale antes que teníamos la de drama pues ya la ha quitado Pero qué pasa si pones acción en minúscula Pues que entonces la hemos liado ves y no te encuentra nada a ver una cosa que puedes hacer justamente porque muchas veces el lower Case no es importante o sea ser key sensitive no es importante en este caso una cosa que puedes hacer aquí es que en lugar

de utilizar el punto include podríamos utilizar el punto some Vale y decir vale Exacto aquí aquí sí que sabe lo que quiero hacer es transformar g punto lowercase vale iguales Vale qué es lo que estamos haciendo aquí pues vamos a asegurarnos que hacemos la comparación de los géneros que tiene la película todo en minúscula y en el filtro también lo vamos a hacer todo en minúscula y así Ahora no seríamos 6 no seríamos que sensitive y por lo tanto se podríamos pasar en minúscula y también estaría filtrando se lo podrían pasar todo en mayúscula y

seguiría filtrando correctamente vale esto que estamos viendo aunque ahora mismo estamos haciendo todos los callbacks y todo esto lo estamos haciendo dentro o sea toda la lógica la estamos dejando dentro de la función seguramente nos hoy no creo Hoy empezaremos con las validaciones y la validaciones sí que las separaremos pero esta lógica la separaremos en la siguiente clase Vale y empezaremos a utilizar algunos patrones de diseño para simplificar esto y poder inyectarles esta lógica y creo que va a ser bastante interesante Así que la siguiente clase si quieres ver cómo refactorizar esto y utilizar patrones

de diseño para poder inyectar de dónde tiene que sacar los datos pues lo haremos con base de datos y lo haremos también con este Jason pues te quedas a la semana que viene que va a estar bastante interesante muy bien ya tenemos hasta aquí todos los gets pero todavía nos faltaría claro o sea hacer get es lo más típico del mundo vamos con uno más chungo Y además así veremos las validaciones vamos a hacer el post crear una película vale vamos a crear una película con post y que le podamos pasar toda información esto tenemos

que hacer un post y lo tenemos que hacer en el mismo recurso como puedes ver siempre siempre el mismo recurso vale aquí se ha inventado este Jason que no sé si tiene mucho dado sentido Pero lo importante antes de esto es que tengo que ponerle aquí el content type el header que tenemos que utilizar Así que ponemos application Jason vale Y aquí Fíjate que me pone title Matrix creo que Matrix ya está pues vamos a utilizar The Good fader Perdón aquí papá vamos a utilizar esta creo que esta imagen funciona ostiago el gatillo que lo

está estrangulando gatillo Dios mío estás triangulando el gatillo ya vale a ver qué información tenemos por aquí el título el título el año El director la duración el póster género y rate vale vamos a hacer que el rate sea opcional la idea obviamente la vamos a crear hoy te voy a explicar también una cosa bastante importante que es la diferencia entre post Patch y put lo vas a ver bastante claro vale post Patch y put vas a ver que mucho más fácil de lo que parece mucha gente se lía pero lo va a saber clarísimo

lo más importante ahora para empezar con el post es que no tiene una idea la idea la vamos a crear nosotros vamos con el post vamos a querer crear esto de aquí vale vamos a crear esto y por lo tanto vamos a tener aquí un up punto post y Aquí vamos a poner barra movies porque siempre tiene que ser el mismo recurso Vale entonces el recurso se identifica siempre con la misma URL no tenemos aquí un create movie vale siempre utilizamos el mismo recurso porque ya lo hemos visto en este pedazo de croquis que os

he hecho que cada recurso se identifica con una URL y los verbos definen las operaciones Entonces vamos a hacer el post lo primero que necesitamos es obviamente recuperar el title el Gear el director actos no la duración el rate si está bueno que no está porque va a ser opcional y todo esto lo vamos a recuperar de request.body pero claro esto lo vimos en la clase anterior y por lo tanto no lo voy a volver a completamente No pero en la clase anterior que para poder traerte el cuerpo de la riquez el rico es punto

Body y poder transformarlo Fíjate lo que tenías que hacer manualmente No te tienes que escuchar el body y cuando la riku estaba trayendo Data la tengas que Grabar en un String y luego pasearla y tal bueno por suerte obviamente justamente Express tiene un maidelware que también vimos en la clase anterior que significa underware que lo que hace es capturar esas request y detectar si tiene que hacer esa transformación que nosotros hicimos aquí a mano para entenderla para que puedas Acceder al rico es punto Body directamente y ya tener acceso al objeto que estamos enviando en

la request vamos aquí y este rico es punto Body para que funcione necesitamos utilizar Este maderware vale Express Jason Express Jason es un madeleble que además ya viene disponible y aquí Entonces ya podríamos acceder a esta información que vendría enviada por el usuario Aunque ahora veremos algún problemilla al respecto por ahora no es importante tanto donde guardamos los datos Así que vamos a mutar el Arley no que tenemos ahí esto no debería esto no sería esto no sería Rest porque estamos guardando el estado de la aplicación en memoria Así que esto no sería Rest lo

terminaremos bien la semana siguiente cuando hagamos todo el tema de base de datos Pero al menos aquí para que vayamos entendiendo esto al final podría ser cualquier cosa y cuando lo iremos la semana que viene y lo separaremos tendremos controladores tendremos las rutas totalmente separadas y lo veremos mucho mejor pero aquí ahora mismo no es tan importante Así que lo vamos a dejar por aquí no y aquí podríamos tener el new movie vamos el new movie el new movie vamos a crear un nuevo objeto aquí ni un móvil donde vamos a tener la ID y

para crear la ID y esto es súper importante y Súper interesante porque no no será que no he visto de gente que hace cosas muy raras con esto aquí por suerte no una biblioteca nativa que además es parte de la plataforma web vale que ya te permite crear ideas únicas entonces puedes traerte cripto entonces haces Snow dos puntos cripto importante el prefijo vale en este caso ya puedes utilizar crypto punto Random uu ID y esto te crea un nuevo ID versión 4 vale Y ya lo tendrías Y esto es totalmente nativo 0 bytes sin instalación

y ya está y esto además por si no lo sabías esto también funciona en el navegador esto ahí lo tienes veis funciona el navegador que muy poca gente también sabía que esto funcionaba el navegador ID vale es un identificador único universal Es Universal y Unique identifiere es necesario importarlo en Audi es necesario importarlo vale Si no te Peta es una pena pero no sé si algún día cambiará esto pero no 10 es necesario importarlo ahora que ya tenemos aquí pues aquí ahora ya podríamos poner el titter el jail el director el día duración rate aunque

rate hemos dicho que podría ser opcional O sea que el rey podríamos poner rate y si no vamos a ponerle 0 vale vamos a poner un valor por defecto por si no viene y esta nueva película La ponemos aquí y aquí le tenemos que indicar que se ha creado el recurso que lo ha conseguido crear Así que lo que tenemos que decirle no es un 200 sino que serían 201 si tenéis dudas de Cuál es el statuscode Aunque Bueno ya os digo yo que muchas veces los status code son muy opinables el otro día Ya

vimos este recurso de los gatitos y Vais a ver que el correcto para cuando creáis un recurso sería este 201 cal que le dice creado vale Y está bastante bien aquí en cada uno tenéis una explicación por ejemplo aquí es una respuesta que indica que la Rey juez ha terminado correctamente y se ha creado el recurso este nuevo recurso descripción puede ser muchas veces lo que tiene que devolver sería un enlace a ese nuevo recurso Aunque hay gente que muchas veces lo que hace realmente es devolver el recurso esto depende la estrategia que tengas en

cuanto a lo que quieras que devuelva a veces puede ser interesante pues devolver el recurso que has creado para actualizar la caché del cliente por ejemplo no Y así pues tienes el nuevo ya creado porque este te devuelve la idea entonces evitándote crear una nueva request también tienes la idea porque la ID la hemos creado justamente aquí y a veces es la idea que te crea la base de datos o lo que sea pero lo importante 201 y aquí tenemos el Jason Aunque ahora veremos algún problema ya con esto vamos a poner esto aquí tendríamos

el rico es de la película al post hacemos en request vale se ha creado correctamente me está devolviendo aquí toda la información y por lo tanto Ahora cuando yo pida todas las películas deberíamos ver que al final ahora tenemos The Good Father vale Pero cuál es el problema de esto que acabo de hacer cuál es el problema de esto que acabo de hacer a ver si alguien lo sabe Exacto que no valido nada no que no valido absolutamente nada no estoy valorando absolutamente nada o sea yo aquí el type le paso un 1 en el

Gear le pasó le pasó pepote y de director le pongo yo que sé le puedo poner lo que me dé la gana lo que quiera de duración le pongo un cero y esto se lo come con unas patatas fritas que bueno pan y no solo eso sino cosas peores todavía Porque además puedo pasarle mal la información o sea información que es importante que no sea estoy pasando lo crea así directamente cosas que están mal obviamente no por suerte estamos al menos si os fijáis al menos estamos extrayendo las propiedades pero como he visto algunas veces

vale de hacer algo así hacer algo así que esto ya es como venga locurón locurón reck punto Body venga para dentro Todo para adentro claro esto todavía más peligroso o sea aquí Tenemos un montón de cosas muy peligrosas porque un rico es punto Body aquí ya te puede inyectar lo que te dé la gana Esto no se hace nunca no siempre hay que intentar meter y validar los datos así que qué es lo que podríamos hacer a ver una cosa muy muy muy básica no de primeras obviamente sería asegurarte que tienes los datos que necesitas

o sea realmente estamos haciendo aquí esto Pero oye qué pasa si no tengo título Vale pues podríamos hacer esto de si no tengo título si no tiene género o si no tiene tal o si no tiene tanto pues Oye un estatus 400 y un mensaje de que faltan recuerde films no algo así Esto no es lo mejor y menos Claro Qué pasa que si tú intentas hacer este tipo de validaciones así a mano no dices y si el año es diferente entonces el año tiene que ser esto y si el rey es diferente no Y

si la duración no es un número Bueno ya veis que hacer este tipo de validaciones Así es bastante costoso No es un poco rollo esto no lo vamos a hacer así lo que vamos a hacer es utilizar una herramienta muy interesante hay muchas alternativas vale no me empecéis ahora de Por qué no utilizas yo que sé súper struck porque no utilizas io porque no utilizas YouTube porque no utilizas es que hay mil millones de alternativas Diez mil millones de alternativas vale mil millones tipos no ojo con esto importante lo que vamos a hacer ahora no

lo arregla typescript vale no lo arregla typescript porque hay un error muy común en el que la gente se cree que utilizando tipscript lo que vamos a hacer ahora se arregla y no es verdad lo que vamos a hacer ahora solo se arregla utilizando algo que se ejecute en room Time vale Y eso pues puede ser zood puede ser balibot que lo vimos el otro día puede ser struck puede ser un montón todo el que os dé la gana nosotros vamos a utilizar ahora soat junto con yup uno de los más importantes a día de

hoy tampoco es que vamos a ver no es un curso de zoot Pero vas a ver que es muy sencillo utilizar que para lo que queremos sirve perfectamente y además que como es en el backen da igual que ocupe un poquito más que valibut o que otra para utilizar soft lo primero que necesitamos es instalar la dependencia Así que nos vamos a clase 3 aquí en pie mistol zot y ponemos el menos c vale porque es la dependencia exacta Fíjate que es muy chiquitita y muy rápidamente se instala vamos a traernos de Z punto vale

Y aquí ya teníamos la nuestra querida Z vale esta Z es a partir de la que vamos a hacer todas las validaciones de los tipos de datos que tenemos aquí hay diferentes estrategias que podríamos hacer o sea podríamos validar la request en lugar de validar el objeto de las movies pero a mí me parece más interesante crear el esquema de la movie más que preocuparte por la riquez Aunque podrías también crear la el esquema del input de la riquez Hay un montón de estrategias pero por ahora hacemos el esquema y más adelante ya complicaremos esto

un poquito porque sobre todo más adelante utilizaremos tipscript y veremos que puede ser interesante Cómo se utiliza typship con zot pero ahora mismo vamos a enfocarnos en la película que es lo más importante Así que creamos un movie esquema Vale y vamos a representar aquí el objeto de la película Así que ahora que podemos decir bueno sabemos que tiene un title vale Así que le decimos que el title es un String Y además lo interesante cuando hacemos estas validaciones con esto ya Lo tendríamos pero lo interesante decir bueno además me gustaría tener la información de

cuál es el error y cambiar el error Así que le puedes pasar aquí opciones para que cuando valide y tenga un error te dé ese error diga por ejemplo si el tipo es inválido Imagínate que en el title Le pasas un número pues voy a decir aquí Oye el movie title más vía Sting es muy interesante esto pero hay veces que sí que puede ser importante poner un mensaje personalizado también Incluso si es requerido imagínate pues movie title require o le puedes dar más información por ejemplo le puedes decir please check bla bla bla para

no sé qué no sé cuánto le puedes dar como más contexto más ejemplos a ver tenemos el title el género Mira el género lo voy a dejar para más adelante porque es un poquito más complicado El ejemplo y para que no para empezar con más sencillos el Gear fácil Z punto number pero ojo no solo queremos que sea un número también una cosa muy interesante de zood son la validaciones que tiene en cadena o sea que todo se puede encadenar por ejemplo aquí le decimos zot quiero que me valides que es un número pero claro

un número también puede ser un decimal por ejemplo 2,3 y en el año queremos un dos coma tres no así que vamos a poner punto int o sea también quiero que sea un entero pero claro si es un entero también me podrían poner yo que sé números negativos Bueno pues le podríamos decir varios entero y además es un positivo o también le podríamos dar un Rango de números que son aceptables ves aquí podemos decirle Oye como mínimo de 1900 porque no había películas en 1800 y como máximo pues vamos a poner que como máximo del

2024 vale porque como mucho que sean del año siguiente Pero que no haya ningún número que sea fuera de este Rango obviamente cuando ya decimos positivos y le damos un Rango ya no es necesario esto no que sea un entero sí Porque podríamos ponerle en 1900,5 y la liaríamos pero aquí ya estaríamos empezando a validar aquí el número de validaciones o sea podríamos estar todo el día director vamos a poner zinc la duración Pues un poco lo mismo no que sea un número que sea un entero que como mínimo sea 0 más que cero yo

le pondría que sea positivo no porque poner mínimo 0 básicamente estamos indicando un poquito eso no tenía la duración tendríamos el rate el rate Pues lo mismo Esto está muy interesante ves que aquí pone int Pero esto no Debería ser un int porque hemos visto aquí nuestra pseudo base de datos que tenemos 8.5 entonces las puntuaciones van del 0 al 10 Fíjate que lo bueno es que si lo comparas a como quería yo hacer la validaciones es absurdamente fácil tiene cosas tan interesantes Como por ejemplo el póster ves que es una URL claro muchas veces

ver si algo es una URL es un poco rollo no porque ponemos póster decimos Z punto String pero es que también aquí tiene la posibilidad de validar si es una URL Así que aquí podrían mirar pero podrías ir más allá Podrías poner validaciones específicas para ver que realmente no solo es una URL que termina Por ejemplo puedes poner el ends with Pues que termine con JP que termine con una extensión en concreto o sea la verdad Es una herramienta brutal a la hora de validar no solo formularios sino rico es de este tipo vamos a

poner message póster más vía avalled os voy a enseñar un caso bastante interesante que es el tema de los enumms porque por ejemplo ves aquí en géneros tenemos action Adventure drama y tenemos como diferentes enums o sea porque solo puede hay un número limitado de géneros no son ilimitados sí que es una red o sea podríamos que poner Henry o sea bueno género ya me entendéis podríamos ponerle esto pero esto no sería correcto del todo porque puede ser un número limitado de strings no puede ser cualquier String y aquí la gente podría intentar colarnos cosas

que no tienen sentido No pues una cosa de podemos hacer aquí por ejemplo sería poder utilizar un enum podemos decir un enum que esto Pues aquí tendríamos en la red que puede ser action Bueno no sé si encajarán todos o sea mejor me falta alguno de hecho creo que syfy este lo teníamos por ahí drama comedia no sé si están todos porque no no lo sé Bueno pues al menos Así le decimos bueno es una rey pero de esto una forma interesante también de decir que es una Rey no hace falta hacerlo así como lo

he hecho yo lo puedes hacer o no depende lo que tú quieras hacer que lo puedes poner al final vale puedes poner la Rey al final ves aquí a la derecha que ha puesto punto Pues sería un poco lo mismo que he hecho pero al revés en este caso en concreto creo que prefiero ver primero que es una red y luego que es un enum pero lo puedes hacer como tú quieras y aunque aquí tengas este parámetro aquí que sepas que también le puedes poner aquí opciones para decirle Oye si es requerido si es el

tipo inválido en un vale lo que sea y con esto ya tendríamos todas las validaciones vale con esto ya tendríamos todo el esquema de validaciones que queremos hacer de la película obviamente no es correcto hacerlo en cada riku es crear aquí el esquema y tal Y lo que puede ser interesante es que tengamos una carpeta que le llamamos esquemas por ejemplo vamos a poner aquí movies punto js y aquí podamos sacar tanto la dependencia de zoot vale vamos a sacar también todo este esquema que hemos creado aquí este esquema y aquí en el esquema a

ver podéis crear aquí el esquema lo creas una vez que tiene sentido luego puedes crear una función que sea validate movie donde le pasaríamos aquí un object para validarse es un movie y así es como lo validaríamos o sea le pasaríamos El Movie esquema punto Parts y aquí el objeto aquí hay diferentes métodos que podéis utilizar para validar no Por ejemplo puedes utilizar el pars Aunque a mí el que más me gusta sobre todo para este tipo de casos para no tener que sea un poco rollo El Cómo gestionar el error y tener que hacer

un try Catch puedes utilizar el save pass el safe lo que hace es devolverte un objeto resolve que te va a decir si hay un error o si hay datos Y entonces con un If pues mucho más simple y mucho más sencillo basada en la oportunidad de ver si era un error o si no era un error vale Así que yo utilizaría que el 6 pares y más adelante incluso podríamos utilizar el save a sync para evitar el bloqueo mientras esta base mientras está validando los datos lo importante ahora que tenemos en la función de

validay movie ya la podríamos utilizar Aquí y ahora en lugar de hacer todo esto que estábamos haciendo lo que podríamos hacer es validar Pues el rico es punto Body o sea podríamos decirle Oye el resultado lo vamos a tener de validar request.body Y fíjate que vamos a quitar ya todo esto ya no nos tengo ni que preocupar de si realmente tiene aquí en medio si tiene un parámetro y tal lo único que tenemos aquí es el resultado Entonces si el resultado ha tenido un error pues aquí tenemos que decir Oye pues vamos a devolver res

status 400 Aunque ahora te explicaré una cosa sobre 400 Jason y aquí tendríamos el error y tendríamos el mensaje del error vale Si no ha habido un error pues podemos continuar con esto y ya tendríamos toda la información correctamente paseada y validada Qué quiere decir esto esto quiere decir que aquí sí aquí sí sí hemos validado correctamente Aquí sí que podríamos poner eso el punto de Ita porque no va a dejar pasar datos que no estemos validando O sea si hemos hecho bien la validación lo que va a pasar Es que aquí vamos a tener

todos los datos que hemos validado aquí en el esquema y le hemos indicado el esquema vamos a tener todos estos datos Y ahora lo vas a ver claramente porque le voy a intentar enviar datos que por lo que sea no debería pillar a ver si realmente los pilla y se salta la validación Entonces lo demás lo dejamos igual una cosa que te quiero comentar antes aquí esto es subjetivo pero también se podría utilizar el 422 vale el 422 en lugar del 400 Normalmente se utiliza el 400 y todo el mundo que es batt request una

batt quiere decir indica que el cliente ha hecho algo para que se Cometa este error ya sea que la sintaxis de la rico es está mal que lo que se ha enviado no era correcto del todo lo que sea no y está bien porque esto quiere decir que el cliente no puede repetir esta rico es sin hacer una modificación porque va a tener el mismo problema pero bueno hay otra que mucha gente utiliza en este caso cuando es una validación que es amplio entity no es del hecho de decir que no es el servidor entendido

la request el tipo de contenido que todo funciona bien pero la sintaxis del recurso que sería que se quería crear no se podía crear porque había alguna validación alguna instrucción que no era correcta Vale y también pues el mismo orden no el cliente tiene que cambiar algo porque si lo hace pues va a tener el mismo problema Entonces utilizar el que queráis vamos a probar ahora a ver si envía esto fijaos title year hacemos el request vale me sale el error un poco raro esto es porque no sé por qué no está o sea deberíamos

pasear el Jason no sé por qué pero esto si lo ponemos aquí Jason punto pass a lo veremos correctamente y veremos todos los errores que tiene nuestra petición vale fíjate imbalite type String esperado en String he recibido un number de title Y es que el movie title tiene que es un String fijaos lo bien explicado y todo que está esto es maravilloso en un momento hemos hecho validaciones una validación brutal de todo lo que lo que esperaba y lo hemos hecho de una forma súper súper declarativa súper entendible cualquier persona es capaz de venir aquí

y entender las validaciones que está haciendo todo esto O sea no es tan difícil como unir uniff un iPhone Así que es mucho más fácil y así lo que hacemos Es decir Bueno pues ya está si puedes decir Puedes mirar si tienes un error o puede mirar lo contrario vale el repsol tienes si es un error o sea pueden mirar si es resolve punto error o puede mirar si tienes Access vale Y el saxes pues es un booleano y puedes decir Bueno pues si no es Access entonces o lo puede mirar al revés Si no

si es Access y hace lo otro vale lo que tú lo que prefiráis el tema que como ya tenemos esto fijaos la maravilla fijaos la maravilla voy a voy ahora volver a poner el correcto no que era este vamos a poner aquí el correcto era todo este vale vale hay un tema esto no debería funcionar porque el rating no lo hemos hecho opcional así que vale invalid types era rating y ojo al crime es que el crime no lo no lo he puesto como en el enum pero fijaos lo fácil no ves aquí no he

puesto chrime así que tenemos que poner aquí el crime vale vamos a probar otra vez y ahora solo el raid Fíjate que me dice que es require a ver una cosa que puedes hacer también y esto es brutal no porque a nivel de validación aquí en el rate también podríais decirle Oye pues le voy a poner un valor por defecto y le voy a poner que sea 0 o 5.5 por ejemplo no le puedes poner valores por defecto puedes decir que sea opcional puedes decir si es nulable o sea se le puede pasar un null

en este caso vamos a decirle que por defecto Pues que tenga un valor y por lo tanto como va a tener un valor por defecto quiere decir que es opcional O sea que si no lo pasan va a tener este valor un 5 Vale y vamos a ver ahora si hacemos Send request Vale ahora se ha creado Fíjate en con un 5 y entonces pues ya tenemos pero ahora lo interesante Qué pasa si alguien me dice sql y me quiere inyectar aquí Select all from users no algo así No este sql lo que era inyectar

y tal Fíjate que y esto como para backen Esto es algo súper importante y esto es un tema que mucha gente mucha gente pues como que no que mira a ver imagínate esto no sql Select no habéis visto que no da ningún error O sea no hay ningún problema no da un fallo no pasa nada no y es que vuestras apis tienen que estar abiertas a todo tienen que estar abiertas a todo o sea le puedes pasar de todo pero tienen que estar ser exquisitas en lo que procesan y tienen que focalizarse en lo que

devuelven vale o sea es un embudo las apis tienen que ser un embudo Y por qué se explicó esto porque hay un error muy bestia a nivel de apis en el que la gente lo que hace Es que yo que sé es que es que claro Ay no es que me has me has pasado un sql Es que es que a lo mejor yo que sé me has devuelto una Rey donde no debería no sé qué pues no lo que tenéis que hacer con las apis es que las apis le puedas pasar de todo de

todo y que no reviente porque las aves tienen que ser robustas obviamente lo que tienen que hacer luego es procesar lo que necesitan pero no pueden ser exquisitas en lo que le pasas no pueden petar a la mínima de cambio de que si le pasas una cosa si le pasas no sé qué lo que sea no pueden petar por eso porque es que las pasa una cosa de más y eso es un error muy común que da bastante rabia además cuando te pasa y te por qué porque hay veces que a lo mejor al pasear

toda la información estás pasando un film más todo todo Sí todo todo sí pero a ver obviamente puede haber pasos en el que por ejemplo alguien te está intentando subir una imagen en una request pues obviamente lo que le puedes decir es Oye o sea se la puedes pasar y puedes decirle excepto esto le das un estatus code Y tal Pero un error muy común es en el hecho de que te pase un objeto vale imagínate esto no que me pasa aquí este sql Y entonces Muchas veces te pasa este objeto de sql y dice

Ah no es que no me has pasado exactamente y en el orden que esperaba el objeto de la movie y por lo tanto me muero no respiro Adiós sabes Ese es el tipo de cosas que hay que evitar le estoy pasando el sql y funciona perfectamente pero simplemente lo ignora lo ignora ha creado Yo no necesito esto lo ignoro punto ya está sabes haz lo que tú te lo que te dé la gana pero lo ignoro ya está Esto es lo que hay que hacer esto sería la forma en la que puede ser más robusta

vuestra Api vale muy bien entonces ya tenemos el tema de los esquemas hemos separado ya los las validaciones esto sea un poco como queda el post a ver si este preloquito esto sea como ha quedado un post el post que fijaos que nada la validación separada si ha ido mal aquí esto sería lo que vamos a hacer luego el envase de datos lo haremos en la siguiente clase vale generamos la idea aquí ya tenemos todos los datos validados Así que aquí no podemos fiar O sea no es lo mismo esto que esto eh No es

lo mismo para nada en uno tenemos todos los datos validados Y en el otro no sabemos lo que nos quieren meter y nos pueden estar metiendo de todo nunca Mejor dicho la siguiente es actualizar una película y para actualizar una película normalmente la gente utilizaría el put que no está mal Pero yo lo que quiero es actualizar una película solo una parte de la película Por lo tanto lo que vamos a hacer es utilizar el put Tile Patch perdón y le vamos a poner aquí a http localhost un dos tres cuatro movies y Aquí vamos

a tener la idea esta no puede ser vamos a ver qué películas más pues está la primera vale me he dado cuenta que el año está mal 1994 ese no al correcto el correcto tenemos que decir que es application application Jason vale y le vamos a decir que lo correcto es que el año en realidad era de 1993 vale obviamente esto ahora mismo no funciona nos da nos da no nos dan 404 no lo encuentra Venga pues vamos a hacerlo A ver cuál es el error también muy común que se suele hacer con los pads

Y ahora os explicaré la diferencia entre put Patch y todo esto venga Patch obviamente de nuevo tenemos que utilizar siempre tenemos que utilizar la misma URL vale es el mismo recurso vale teníamos esto a veces aquí lo que se haría un poquito a malas primero obviamente recuperamos la idea vale de rig punto parans luego Aquí podríamos Buscar la película No movies punto fine he encontrado la película si no encontramos la película Vale pues nada 404 no hemos encontrado la película vaya rollo la madre que os parió aquí igual lo mejor sería un find Index moving

porque así tendríamos el índice y así lo podemos actualizar eso en este caso pero si no en base de datos lo haríamos de otra forma si el moving Index es igual a -1 esto que no lo hemos encontrado o menor a cero vale Y por qué lo hago así y no hago un find Pues porque así en una sola operación tengo el índice que lo podré utilizar para actualizar y además puedo saber si está o no está si el moving Index es -1 significa que no está esa película con esa idea 404 y aquí pues

claro aquí alguien puede decir si tiene title movie.title o claro podemos podemos mutarlo directamente podemos decirle movie y movies Index no y decirle muy punto title igual title si tiene Y esto y todo esto sacarlo de title de ricoes.body y así todo el rato no por ejemplo la duración pero claro fijaos que aquí otra vez tendríamos que hacer las mismas validaciones en realidad esto no lo hagáis vale esto Esto no se hace De hecho lo que podemos hacer lo que está chulo Es que como ya tenemos todas las validaciones ya tenemos todas las las tenemos

aquí pero la diferencia de las validaciones que teníamos aquí en movie esquima es que claro ahora lo que quiero claro todas No son no son requeridas aquí hay diferentes estrategias que podemos hacer Depende de lo que podamos pensar que puedan que se pueda modificar pero vamos a pensar que puede modificarlo todo toda esta información Se puede modificar se puede modificar el title el Gear el directo el duration pero a lo mejor solo quiere Modificar el Gear O solo quiere Modificar el raid O solo quiere Modificar el póster o quiere modificar los tres a la vez

pues en ese caso lo que va a pasar aquí es que en el function vamos a poner un validate pase al móvil vale le pasamos un objeto pongo objeto porque en realidad no sabemos esto es un móvil eso está por ver entonces pongo object o le puedes llamar shape si te molesta a esto shape lo que quieras vale o input no sé porque hasta que no sepamos si es un movie vamos a evitar llamarle móvil Vale entonces aquí podemos hacer Ay madre mía con el spoiler podemos utilizar el parcial y ahora te voy a explicar

Qué es qué es esto de parcial esto de parcial si ya sabes tipscript seguramente te sonará Pero esto de parcial lo que va a hacer es que todos y cada uno de las propiedades que tenemos aquí las van a hacer opcionales de forma que si no está pues no pasa nada pero si está la valida como se supone que la tiene que validar y así lo que estamos haciendo es reaprovechar todo este esquema para la actualización de la película y le decimos Oye de este esquema parcial de forma que si está perfecto pero haz que

todas las propiedades sean opcionales si no están pues no pasa nada pero si están me las validas Así hacemos válido Y pase al movie Y utilizando este mismo método aquí como hemos hecho con el otro vamos a como hemos hecho antes vale vamos Aquí vamos a poner el resolved movie validay movie red.body y ya ahí tendríamos el resultado y ahí pues ya si tenemos el error o al revés si queréis voy a utilizar aquí el saxes para que lo veáis también lo mismo no res status 400 ahí tenemos el error si ha funcionado correctamente Pues

mira esto lo vamos a hacer solo aquí porque no necesitamos antes vale movie Index si no encontramos la película Pues nada 404 y ahora sí lo que podremos hacer es actualizar la película o sea aquí podríamos decirle Y fíjate que aquí como ya está validado todo pues es una maravilla porque decimos update movie pues la película es todo lo que tenemos en moving Index y todo lo que tenemos en result que nos ha pasado en nuestro usuario vamos a guardar esta película en el índice que todo esto lo que haremos en base de datos en

la próxima clase vale Y devolvemos el Jason de la película actualizada Así que con esto Ahora ya podemos hacer este tipo de actualizaciones actualizar una película vale Send request Y fíjate ahora 1993 si le digo que el año de Esta película es 1998 y Send request ves me actualiza justamente esa película Le puedo pasar le puedo cambiar otra cosa por ejemplo Intel puedo decir hola vale Y luego ahora no es la el mejor nombre pero ves ahora tenemos esto y le puedo cambiar el ID le puedo cambiar el ID un dos tres a ver te

puedo cambiar el ID no le puedo cambiar el ID porque no le puedo cambiar el ID Por qué no tiene permiso para cambiar el ID porque no se está validando Vale y esto es lo interesante lo que estamos haciendo con esta validación como lo que estamos haciendo es validar todo esto la idea no está es opcional todos los campos que se validan Pero la idea no está por lo tanto Aunque tú le pases la idea lo que nos está haciendo zote es decir bueno la idea me da igual que me la pases la voy a

ignorar totalmente Así que la idea Aunque yo se la pase aquí y haga la request Fíjate que no me la modifica que justamente lo que esperamos vale Así que es súper importante y esta sería un poquito la forma de que con el mínimo código posible lo que hemos estado haciendo es básicamente decir ostras pues ahora ya estamos validando correctamente las cosas y no y no O sea no rompemos nada para que os hagáis una idea también la validaciones mira en este caso alguien me estaba diciendo por aquí Pásale un dato incorrecto por ejemplo el año

no si tú le pasa aquí un String 1998 vale se lo pasa así se va a dar un error ves error tipo inválido esperado el número y aquí tienes un String porque lo que estamos haciendo con el parcial con esta validación de aquí lo que estamos haciendo es Haz que todas las propiedades que hay aquí en el esquema sean opcionales pero si están las validas si no están no pasa nada no son requeridas y además si no está de ninguna forma la propiedad la ignoras y ya está ahí lo tendrías Qué pasa si no le

pasas ningún dato Bueno si no le pasas ningún dato seguramente lo que va a hacer aquí en este caso es que lo dejaría Exactamente igual vale lo que va a hacer es no actualizarlo lo va a dejar Exactamente igual aquí también podrías hacer que pues que le haga algo o sea yo la verdad no creo que pase nada O sea no me parece incorrecto el hecho de que tú le pases aquí un objeto vacío y te devuelva lo mismo lo sería que actualizase algo que no debería pero lo único que ocurre aquí es que no

actualiza nada está dejando Exactamente lo mismo por qué no hay nada por lo tanto no actualiza nada ya está lo he actualizado correctamente pero actualización no era nada vale esa sería un poco la idea entonces la diferencia amigos y esto es súper súper importante diferencia entre post put y Patch yo os voy a decir lo que en teoría es primero quiero que os quede muy claro una pregunta o sea una palabra que se llama idem potencia vale la ido en potencia y esto es importante que entendáis lo que es la idea en potencia que además

en software es bastante importante la impotencia es la propiedad de realizar una acción determinada varias veces y aún así conseguir siempre el mismo resultado Por qué es importante que entiendas esto de aquí porque claro Es importante saber si tienes funciones que son idempotentes en el sentido de que por más que la llames siempre estás obteniendo el mismo resultado por ejemplo las funciones que son puras son idempotentes Porque si tú sumas 2 + 2 siempre obtienes el mismo resultado vale Y es lo mismo que si lo hicieses una vez pero luego además la iden potencia habla

también del Estado interno que pueden tener las cosas por lo tanto es importante esto porque la impotencia va a ser diferente en estos tres casos Porque por ejemplo Cuál es el propósito del post El propósito del post es crear un nuevo elemento en el servidor elemento recurso vale recurso pero el put tiene otro objetivo diferente no que sería actualizar totalmente un elemento ya existente o crear crearlo crearlo si no existe Y esto es importante porque ya verás que la diferencia es sutil Pero puede ser o sea puede crear también el elemento si no existe vale

que es parecido al post pero tiene una diferencia importante y luego tendríamos aquí el Patch que el Patch básicamente es actualizar parcialmente un elemento o recurso vale parcialmente que justo lo que hemos hecho para que veamos un poco la diferencia También tenemos la URL que esto sería barra movies barra vale Este sería el barra movies pero ojo porque el put sería barra movies barra 1 2 3 4 5 6 7 8 9 No aquí le pasaríamos la idea y aquí en el Patch lo mismo vale diferencia ya importante Aunque el post aunque con el pub

podrías crear Fíjate que le tienes que le tendrías que dar tú la ID y aquí está un poquito la diferencia no en la semántica el post cada vez que realizas una solicitud a una url compost necesitando crear un nuevo recurso y la URL representa la colección en este caso movies no y por lo tanto en la respuesta generalmente te van a dar lo que has criado o la URL donde está lo que has creado no es idempotente quiere decir es la propiedad realiza una acción determinada varias veces y aún así conseguir siempre el mismo resultado

es idempotente post no es idempotente no porque creas siempre un nuevo recurso vale siempre estarías creando un nuevo recurso por lo tanto no es identiden potente ahora el put es idempotente sí que lo es el put sí que es identipotente por qué porque por más veces que tú hagas la misma solicitud put idéntica a la misma URL el resultado Siempre será el mismo porque va a ser siempre el mismo porque tú le estás indicando aquí la idea porque cuando le vas a pasar los datos Y tal no se está creando otro recurso nuevo si no

está si no existe sí que se crea pero se crea con la idea y con los datos que pasando pero si vuelve a estar y lo actualizas con exactamente los mismos datos va a ser exactamente el mismo y vas a crear vas a obtener siempre el mismo resultado en cambio con post no porque cada vez que tú llames a post barra movies Aunque siempre le envíes los mismos datos siempre te va a estar creando nuevos recursos por lo tanto diferencia clave entre post y put vale post no es idempotente y put sí queden potente y

en Patch en principio sí pero no está garantizado Pero bueno es un poco más complicado eso en principio sí vale Sí porque si tú siempre le pasa la misma actualización sí que lo puede ser pero qué pasa también podría pasar en el put pero en el Patch Qué pasa que normalmente si lo podría ser y con el put podría pasar algo parecido lo podría ser pero depende Por qué Porque a lo mejor tienes un campo updated at que por lo que sea cada vez que tú actualizas ese recurso el update de edad ha cambiado esto

en realidad también podría pasar en el en el put lo que pasa es que no es tan común vale no es tan común porque en el put La idea es más actualizarlo todo y normalmente no es tanto porque quieras actualizar un campo en concreto y por lo tanto esa información de Cuándo se actualizó y tal no suele ser tan vital y en los parches en los parches que se van haciendo sí que suelen pasar pero también puede ocurrir a up también puede pasar en el put pero la diferencia está aquí post crear un nuevo elemento

recurso seguro que nos piden potente siempre está creando nuevos recursos el put sí que ha sido impotente Aunque puede como hemos visto puede ser que no pero la idea es que sí porque siempre le estás creando el mismo recurso y con los mismos datos y por las mando siempre te está devolviendo lo mismo Fíjate que la URL ya le estás pasando la ID y en el parche en el Patch lo que quieres es actualizar parcialmente un elemento entonces no es actualizar totalmente fíjate totalmente el elemento que ya existe sino que solo una parte que justamente

es lo que hemos hecho así que esa es la diferencia entre las tres dice sí pero las sería algo relacionado con la base de datos tal vez claro Sí pero aunque quieras o no Si tú devuelves el recurso de la base de datos Imagínate que tú haces un Patch Imagínate que yo hago esto y le digo que el Gear vale year Mira ves cómo funciona bien vale ves 2022 Imagínate que yo aquí tengo un campo que es claro yo le voy donando Send request y me va cambiando me va cambiando eso Entonces no sería identipotente

como tal se supone que sí que lo es pero ya te digo que depende no se puede decir con 100% de seguridad que siempre el resultado va a ser el mismo independientemente que sea base de datos o que no lo sea sabes no es muy peligroso poder crearla y de comput depende es que claro a ver he dicho lo que se puede hacer no que se tenga que hacer sabes o sea es peligroso el crear la ID desde fuera pues puede ser que sí pero muchas veces depende más bien del contexto de vuestras aplicaciones no

tanto de si está mal per se entendéis hay veces que puede ser correcto que la idea se pueda crear desde fuera porque por ejemplo el identificador se han identificador que no no pueda ser generado porque es más interesante que sea ya proporcionado Como por ejemplo el dni el dni de un usuario puede ser más interesante utilizar ese identificador Aunque alguien me dijo No que están repetidos bueno puede ser pero hay veces que puede ser más interesante que ese sea el identificador único del usuario vale porque es el que identifica al usuario de forma fehaciente y

entonces ya venga de fuera y muchas veces habréis visto que tenéis un formulario de usuario vuestro donde se actualizan todos los datos no se parchean tenéis el formulario donde puedes cambiar nombre apellido no sé qué dirección y tal y le das pum Y eso lo que hace es un put porque lo que está haciendo es actualizar todos los datos aunque los machaque está enviando todo el objeto en cambio el Patch no enviaría todo el objeto se lo enviaría la parte si aquí podríamos estar todo el día todo el día aquí discutiendo y tal sé que

esto es objetivamente lo que hacen Vale entonces es una cosa esta es la teoría y en la teoría yo creo que queda bastante claro el Cómo se hace y cómo se utiliza que es que podrías hacer es que hay un montón de prácticas buenas malas ahí fuera pero esto digamos es la diferencia teórica de los tres que vosotros utilizáis el put como un pads que en el que usáis el post para todo que no sé qué eso ya cada uno que haga lo que quiera yo quería explicar la teoría de la diferencia entre los tres

para que las tengáis claras Y podéis seguir utilizando y lo que queráis vale dicho esto vamos a hacer una cosa que es importante el cors Mirad amigos vamos a crear una web aquí mismo en la clase 3 rápidamente ya que tenemos nuestra Api Rest Aunque la semana que viene lo haremos en base de datos Y tal vamos a poner aquí una web index.html vale algo Tampoco voy a hacer aquí la web del mundo de la vida vale pero sí que vamos a hacer una una web que me ayude como para probar mi Api no probar

Api Rest vamos a tener aquí un Main vale un mail y aquí en el title vamos a poner Script type voy a utilizar Time model Más que nada porque así lo puedo poner arriba vale No sé qué pone aquí aquí pone cosas raras Pero esto no quiero hacer lo que quiero hacer es hacer un http local Host un dos tres cuatro barra movies quiero básicamente Quiero ver mis películas Quiero ver mis películas he creado mi Api Qué bonita mi Api la quiero utilizar y vamos a utilizarla vamos a hacer un fetch y ya está vamos

a crear aquí html movies.map y de cada película voy a ir mapeando para tener aquí Ah mira eso me gustaba un árticol vale un Ártico el papá movie Tiger vamos a poner aquí la ID también porque luego la vamos a necesitar y este map lo vamos a hacer un joint fijaos esto Vanilla js en el riac ni hostias nada pan a pelo vale cueri selector men Inner html igual al html o sea lo único que estoy haciendo en esta página web es un fetch transformar las películas en un poquito de algo Ártico y tal de

hecho vamos a poner también la imagen con el source esto es un póster y vamos a ponerle un poquito vamos a poner aquí un Style para que no ocupe mucho las imágenes que si no y match ostia a ver a ver el estilo que me hace hija con papá a ver qué me hace auto 320 píxeles para que no ocupe mucho Maxwell 100% vale no me ha hecho un estilo de nada bueno os voy a enseñar una herramienta que yo utilizo un montón que me encanta que se llama servor donde tú haces npx server y

le dices la carpeta donde tiene la página web por ejemplo esta donde son estáticas las páginas web y esto lo que te hace servirte la página web en una URL y puedes acceder y verla vale pero fíjate la página en blanco que me ha dejado esto y fíjate que aquí me ha dado un 404 que me ha dicho Field error que me por aquí [Música] vale el Kors Vale qué está pasando vamos a hablar un poquito del crosso origin Cross origin resource sharing vale el problema Por lo que tenemos este error de coste lo que

pasa con el Kors es un mecanismo importante que solo funciona en el navegador Por qué Porque si yo aquí hago un CURP barra movies Fíjate que aquí funciona correctamente Y entonces dentro en servidores esto es un mecanismo que no funciona es un mecanismo que restringe si ese recurso lo puedes utilizar en un origen y es algo que hacen los navegadores Entonces es un mecanismo que te permite que un recurso sea restringido en una página web para evitar que un origen o un dominio fuera de otro dominio desde el que se sirvió ese recurso Puede acceder

entonces solo funciona en navegadores Por qué Porque los navegadores hacen la petición y digamos que preguntan a este a este recurso a este origen no de preguntan al localhost un dos tres cuatro fíjate yo estoy aquí en localhost 8080 pero imagínate que esto es página web 1.com Y esto es Api punto página 2.com vale o sea da igual que sea localhost o sea lo que sea sería el mismo problema lo que está haciendo el navegador es preguntarle a la Api y decirle Oye localhost un dos tres cuatro barra movies una cosa es verdad que este

dominio que no es el tuyo que no es el tuyo porque sino no te preguntaría si fuese en la misma página para que te voy a preguntar Seguro que sí pero lo que está pasando Es que el navegador está diciendo Oye yo estoy en otro dominio y estoy pidiendo en uno diferente me voy a voy a ver si esto de cruzar estos datos tiene algún tipo de sentido Sí este dominio que aloja este recurso realmente tiene o espera que este dominio de aquí pueda acceder a sus datos vale Y entonces estaba mirando a ver si

puede hacer esa solicitud real Ok entonces qué pasa que le ha dicho que no Y cómo le ha dicho que no pues se lo ha dicho con una falta de headers O sea no ha contestado esto lo vimos en una clase no hay una cabecera aquí que le diga no no Claro que sí Esto está perfecto aquí en las respuestas si miramos aquí la respuesta de la cabecera no le está dando respuesta le ha preguntado al navegador y él y lo que ha dicho nuestra Api es yo no lo sé haz lo que te dé

la gana y el navegador ha dicho pues yo sé lo que voy a hacer le voy a decir que no se puede y por eso tenemos aquí el error de Kors Qué significa Cross origin resource sharing error de uso compartido de recursos entre dominios Y fíjate aunque se ve muy pequeño ves el error que pone missing al lado origin header o sea es que falta una cabecera para realmente decir ostras que sí que puede funcionar esto por lo tanto si funciona si lo único que falta es una cabecera cómo lo podríamos arreglar nosotros hombre nosotros

Nosotros tenemos aquí acceso a nuestra Api porque esto se tiene que arreglar en la parte del backen ya sea en la Api ya sea en el Proxy ya sea en el enrutador en lo que sea que tenéis que pueda Añadir esa cabecera porque si no estás a cabecera no va a funcionar vale Así de claro quién añade la cabecera eso es lo de menos nosotros por suerte como teníamos acceso aquí a la punto js nosotros lo podemos Añadir aquí y lo que podemos hacer además es que según cada epone nosotros podríamos decir vale solo Este

impond es el que va a tener acceso Así que vamos a poner res punto header y le decimos Access controla la origin y le podríamos poner un asterisco y esto funcionaría si le ponemos un asterisco lo que estamos diciendo es que todos los orígenes que no sean nuestro propio origen están permitidos Así que haciendo este cambio Si volvemos a nuestra página y refrescamos podemos ver que ahora sí vale están de finales Porque seguramente estoy accediendo a una información que no existe vamos a poner Gear y ya está Vale ahora sí como puedes ver sí que

acceso Pero porque no lo ha dicho O sea no se ha dicho Sí sí están todos están todos todos los orígenes que me pidan información Sí sí y fíjate aquí lo tienes Access control origin ves asterisco ahora bien hay que usar siempre asterisco que esto es lo que hace todo el mundo un asterisco y ya está De hecho no veas cómo se me puso la gente es que has dicho asterisco bueno no hace falta poner asterisco Podrías poner aquí directamente Cuál es el origen al que Aceptas que pueda ir por ejemplo localhost 8080 haciendo esto

obviamente esto sigue funcionando pero fíjate que ahora si vas a movies el Access control origin aquí hay localhost 8080 O sea ya ha cambiado si tú a esto lo cambias a 80 81 y refrescamos vale volvemos a tener el mismo problema porque cuando ha contestado la respuesta ha dicho ases contra el origin 8081 pero es que este dominio es 8080 al final piensa que el puerto es como un origen totalmente distinto O sea no solo El dominio es importante sino que también el puerto y esto Pues lo mismo sería en página web los dominios serán

distintos vale aquí teníamos esto pero alguien puede decir ostras Claro pero yo no sé cuál va a ser el origen claro yo no me puedo saber de antemano todos los orígenes o sea yo no puedo saber si va a ser localhost 3000 30005 8000 no tengo ni idea y es normal que no te lo sepas qué es lo que puedes hacer a ver normalmente lo que se hace mucho es el hecho de voy a detectar el origin y voy a ver qué es lo que hago podríamos tener una lista por ejemplo de accepted origins tú

podrías tener aquí pues localhost 8000 en un dos tres cuatro y el movies.com porque obviamente también vas a querer aquí los de producción movies.com y también mide Pues también tiene acceso porque me cae bastante bien este chico y se la gana Pues aquí lo que puedes hacer es recuperar del origin la request que es una parte de los de los headers origin aquí tendríamos el header de origin y aquí simplemente dirías Oye si este origin está en los aceptados pues le Esto vale Y también hay un caso más hay un caso más que tienes que

tener en cuenta que es bastante importante y este suele ser un error bastante común que el origin esta cabecera no siempre te la envía al navegador Alguien sabe cuándo no te la envía al navegador es muy sencillo el navegador no envía nunca el header de origin cuando cuando la petición es del mismo origin o sea si yo estoy en la página http localhost un dos tres cuatro y hago una petición a localhost un dos tres cuatro no te envía justamente la cabecera de origin vale justo para que lo sepáis lo digo porque muchas veces y

esto es un error que me he encontrado a veces claro la gente hace esto a set de origins incluso origin y pone aquí la el localhost un dos tres cuatro pero claro Hay que tener en cuenta que si es el mismo origen pues tendrías que hacer algo así no Oye y si no tienes origen Pues a lo mejor le tienes que dar también o también se puede mirar otras cabeceras que te pueden decir si es el mismo origen hay de cabeceras que te lo pueden decir vale que lo sepáis y que lo tengáis en cuenta

que este tipo de cosas las tenéis que tener porque si no al final tienes el problema Por qué no te la Por qué no te informa porque no tiene sentido No no es un Kors ya no tienes el problema de Access control original porque su propio origen siempre siempre está disponible si no imagínate todos los recursos que pidieses imágenes y tal que todos tuviesen al pedirte a ti mismo no tendría sentido vale Así que con esto con esto ya lo que podrías hacer es decir Bueno pues con este assette origins y tal lo que podemos

hacer es pedir origin vale voy a poner aquí si no tenemos origin vale Y con esto ya tendríamos una forma dinámica de cuando entramos fíjate ahora si es en localhost 8080 ves me está poniendo exactamente el que necesita no hace falta siempre poner el asterisco ahora bien Qué pasa que esto esto funciona funciona pero no funciona para todos O sea hay un caso bastante interesante mira vamos a hacer mira tengo unos minutos vamos a hacer rápidamente aquí un botón que sea eliminar Vale y vamos a hacer que cuando se añada vamos a hacer aquí un

document Evil listener voy a hacer el delete en un momento document even listener vale con el clic el esto vamos a poner si la e Target matches Button Entonces vamos a llamar a vale vale tiene buena pinta todo lo que ha hecho aquí lo único que tiene mala pinta es que me parece que ha añadido algo de más está aquí está aquí esto que aquí hasta aquí no está aquí a ver es que algo está cerrando voy a hacer un momento esto este es ahí vale Bueno lo que estoy escuchando son todos los clics del

documento Y si estoy haciendo clic en botón lo que miro es el artículo que está más cerca para recuperar el ID del dataset vale Y aquí hago un Fest para borrar justamente de movies y no sé qué no sé cuánto vale vamos a hacer este delete en un momento y vamos a ver otro problema Imagínate que esto esto lo ponemos en el delete que voy a hacer ahora vamos a hacer aquí el delete que también es importante poder borrar app delete barra movies vale recuperamos la ID recuperamos el índice hacemos el slice a bueno si

no encuentra vale 404 Y aquí hacemos una splice vale vamos a hacer para modificarlo y quitamos eso y hacemos el movie digital vale perfecto Aunque si hacemos un delete si hacemos un delete no tengo Claro si deberíamos devolver un 204 puede ser bueno da igual vamos a dejarlo aquí con él Creo que eran 204 bueno no pasa nada hacemos el delete vale para borrar el recurso y aquí estamos haciendo esto Bueno si esto Ahora lo probamos aquí tenemos el Direct veis aquí eliminar Y le doy Fíjate que este delete me está dando un problema de

Coss vale voy a decir Bueno pues no pasa nada me voy aquí a mi app y hacemos exactamente no hacemos este truquito de Añadir el origen el cors anga refrescamos le damos aquí perfecto pim Pam Qué ha pasado qué ha pasado qué ha pasado por qué si sigue me sigue dando un error la madre que lo parió que sigue dando un error el tema es que el cors es un poco más con dependiendo del método vale tenemos métodos digamos métodos voy a llamarle normales vale métodos normales que sea get Head y post y métodos complejos

vale que serían Pues todos los demás put Patch y delete Y qué pasa que los métodos complejos existe una cosa que se llama course preflight el cosplay cuando tú haces una request utilizando el put el Patch y el delete requieren una petición especial que se llama options Vale entonces va a hacer una petición options que lo que va a hacer es preguntarle a la Api utilizando el verbo options y decirle Oye una cosa Antes de hacer yo este put o este Patch o este Cuéntame entonces es como una petición previa que va a hacer y

fijaos aquí si no sé si lo veis pero justo aquí justo aquí veis este options que está justo debajo del Direct Qué pasa que este options es el que le ha activado no tiene ningún sitio el cors por lo tanto lo que tenemos que hacer es decir Bueno pues claro tendríamos que poner app punto options y que cuando hagamos el movies no cuando vayamos aquí al movies entonces también Añadir Pues todo este tema de El origin y tal ahora se supone que en el options también Lo tendríamos vale aquí la he liado porque esto es

así vale Y ahora sí que Lo tendríamos vale hay lo puesto pendiente porque tendríamos que pasar el response claro no he hecho tres punto sent vale que por eso está fallando no he terminado de enviar la petición Vale ahora no sé porque me falla Rest podemos 200 a ver si me falta Ay Espérate que no sé si me tendré que ponerle más porque ves haces control ahorro origin Ah porque claro me faltan Ahora qué pasa claro me falta también pasarle una cabecera que le indique Cuáles son los métodos que puede utilizar también ves a laund

Y entonces le tengo que decir Oye pues puedes utilizar el get el post El Patch el delete vale estos son los métodos que vas a poder utilizar vale porque si no Tampoco puede tener acceso no solo por el origen que mucha gente solo se cree que es el origen sino que también hay pues tampoco a ver qué está pasando aquí no sé si es que la he liado con algo no sé si que la estoy liando con algo a ver a ver el error que me da pues esto en principio lo estaba haciendo bien el

options No pues está haciendo bien el header para que luego el mezzo lo escrito bien controlads get post Bueno pues no no hace falta esto tengo aquí y el resent bueno Esto también lo he hecho aquí Qué bueno Esto no importa porque esto lo va a enviar aquí alguna cosa la he liado eh sobra una s donde sobra la s el Access Ahí ves ves Cómo era eso Gracias gracias O sea no es un tema de cors es un tema de dislexia gracias gracias yo eh Pero bueno vale vamos a ver ahora vale el preflight

vale Ah vale pues ya el delete Así que lo ha hecho sí que lo ha hecho vale Sí que lo ha hecho lo que pasa es que el html está mal aquí vale ahora sí que lo ha hecho porque esto no es Access esto no devuelve un Jason esto sería res Ok vale Y cuando tengamos el Ok entonces lo envía Ya está ya está ahora sí veis Ahora lo elimina lo elimina lo elimina O sea que ya está con esto Lo tendríamos solucionado Gracias por el taipo que si no con esto hubiéramos estado ahí todo

el día el tema es que al final es un tema de cabeceras cuando tenéis problemas cuando tenéis problemas de cors no deja de ser esto un problema de cabeceras que a veces lo puedes hacer en el backen perfecto que lo puedes hacer en otro sitio perfecto pero es un tema de cabeceras que falta esa cabecera Entonces esto sería la forma de cómo cómo lo podemos arreglar nosotros pero obviamente hay además un maidelware que se llama Kors que podéis instalar y Este cors vale lo podéis utilizar aquí mira podéis hacer app.lus para cores y aquí pues

ya tendríais todo solucionado pero cuidado con esto vale cuidado con esto porque este cors este maidelware lo que va a hacer por defecto es poneros todo con un asterisco que muchas veces solucionar lo soluciona pero el problema que está pasando Es que le estás diciendo que sí a todo y hay veces que a lo mejor no tiene sentido Entonces por qué os lo explico pues para que entendáis lo que está pasando la magia no se trata de poner simplemente cors y ya está lo arregla tal no tenéis que entender que está pasando porque si no

no lo estáis aprendiendo lo que estáis dando palos de ciego y os lo he arreglado bueno fantástico que lo ha arreglado pero no estáis entendiendo nada Es verdad que esto lo arregla de hecho lo podemos ver aquí vale si yo refresco pues Salen todas las todo o sea lo arregla todo pero fijaos que lo que está pasando aquí si lo miráis aquí os está poniendo un asterisco esto es que vale Sí a todo esto para vuestros proyectos vuestros personales puede tener sentido Pero no muchas veces pues por ejemplo aquí podéis utilizar origin origin callback y

aquí podríais tener el accedeto origins vale al menos para que sepáis que hay opciones vale que no se trata de que sea todo sino que esto acepta aquí Unas opciones vale esto por aquí y aquí podríais tener Pues los origins lo podéis sacar de una base de datos podéis mirar si el origen empieza por una cosa o lo que sea el original esto así y aquí podríais poner esto de accepted origins si esto incluye el origen Entonces tal si no tiene el origen Pues también vale perfecto y si no pues nada hay un error y

al menos con esto ya estaríamos volviendo a hacer otra vez lo mismo veis de tener correctamente el coach indicado con el origen que realmente estáis utilizando vale Así que es importante que esta diferencia la sepáis y que se puede también configurar para llevar esto a un nivel un poquito más cuidado