In questo codelab, scopri come funziona la stessa origine durante il recupero delle risorse.
Configurazione: recupera la pagina dalla stessa origine
La demo è ospitata all'indirizzo https://same-origin-policy-fetch.glitch.me.
Questa semplice pagina web utilizza fetch per caricare la risorsa da https://same-origin-policy-fetch.glitch.me/fetch.html. Poiché index.html e fetch.html condividono la stessa origine, dovresti vedere 200 nell'anteprima in tempo reale.
1. Recupera la pagina da un'origine diversa
Prova a modificare l'URL di recupero in https://www.google.com.
Cosa vedi nell'anteprima in tempo reale?
Il browser avrebbe dovuto bloccare la richiesta di recupero perché hai richiesto una risorsa da un'origine diversa. Ciò significa che un malintenzionato non può leggere le risorse multiorigine anche se ha assunto il controllo del browser di un utente.
2. Recupera una risorsa multiorigine
Prova a cambiare l'URL di recupero in https://api.thecatapi.com/v1/images/search.
Cosa vedi nell'anteprima in tempo reale?
L'URL di recupero è un'origine diversa, ma dovresti vedere il codice di stato 200. Perché? Le applicazioni web moderne spesso richiedono risorse multiorigine per caricare script di terze parti o eseguire query su un endpoint API. Per supportare questi casi d'uso, esiste un meccanismo chiamato CORS (Cross Origin Resource Sharing) per indicare al browser che il caricamento di una risorsa multiorigine è consentito. Per saperne di più su CORS, consulta Condividi le risorse multiorigine in modo sicuro.