En este codelab, verás cómo funciona el mismo origen cuando se recuperan recursos.
Configuración: Recuperar página del mismo origen
La demostración se aloja en https://same-origin-policy-fetch.glitch.me.
Esta página web simple usa fetch para cargar recursos de 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. Cómo recuperar una página desde un origen diferente
Intenta cambiar la URL de recuperación 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 recursos de origen cruzado, incluso si tomó el control del navegador de un usuario.
2. Cómo recuperar un recurso entre orígenes
Intenta cambiar la URL de recuperación a https://api.thecatapi.com/v1/images/search.
¿Qué ves en la vista previa en vivo?
La URL de recuperación es de un origen diferente, pero deberías ver el código de estado 200. ¿Por qué? Las aplicaciones web modernas suelen solicitar recursos de varios orígenes 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 la carga de un recurso de origen cruzado. Consulta Cómo compartir recursos multiorigen de forma segura para obtener más información sobre CORS.