En este codelab, verás cómo funciona el mismo origen cuando se recuperan recursos.
Configuración: Recuperar página desde el mismo origen
La demostración se aloja en https://same-origin-policy-fetch.glitch.me.
En esta página web simple, se 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 200 en la vista previa en vivo.
1. Recuperar página desde 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 otro origen. Esto significa que un atacante no puede leer recursos de origen cruzado incluso si tomó 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 de recuperación tiene un origen diferente, pero deberías ver el código de estado 200. ¿Por qué? Las aplicaciones web modernas a menudo solicitan recursos de origen cruzado para cargar secuencias de comandos de terceros o consultar un extremo de API. Para admitir estos casos de uso, existe un mecanismo llamado CORS (uso compartido de recursos entre dominios) que le indica al navegador que se permite cargar un recurso de origen cruzado. Consulta Comparte recursos de origen cruzado de forma segura para obtener más información sobre CORS.