En este codelab, verás cómo funciona el mismo origen a la hora de recuperar recursos.
Configurar: Recuperar página desde el mismo origen
La demostración se realizará en https://same-origin-policy-fetch.glitch.me.
Esta página web sencilla usa fetch para cargar recursos desde https://same-origin-policy-fetch.glitch.me/fetch.html. Dado que index.html y fetch.html comparten el mismo origen, deberías ver que se muestra 200 en la vista previa en vivo.
1. Recuperar página de otro origen
Intenta cambiar la URL para recuperar datos a https://www.google.com.
¿Qué ves en la vista previa en vivo?
El navegador debería haber bloqueado la solicitud de recuperación porque solicitaste un recurso de un origen diferente. Esto significa que un atacante no puede leer datos de origen cruzado recursos, incluso si tomaron el control del navegador de un usuario.
2. Recupera un recurso de origen cruzado
Intenta cambiar la URL para recuperar datos a https://api.thecatapi.com/v1/images/search.
¿Qué ves en la vista previa en vivo?
La URL para recuperar datos tiene un origen diferente, pero deberías ver el código de estado 200. ¿Por qué? Las aplicaciones web modernas suelen solicitar recursos de origen cruzado para cargarse secuencias de comandos de terceros o consultar un extremo de API. Para adaptarse a estos casos de uso, existe un mecanismo llamado CORS (uso compartido de recursos entre dominios) para indicarle al navegador que permite cargar un recurso de origen cruzado. Consulta Comparte recursos multiorigen de forma segura para obtener más información sobre CORS.