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 pagina da un'origine diversa
Prova a cambiare l'URL di recupero in https://www.google.com.
Cosa vedi nell'anteprima in tempo reale?
Il browser dovrebbe aver bloccato la richiesta di recupero perché hai richiesto una risorsa da un'origine diversa. Ciò significa che un utente 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 ha un'origine diversa, ma dovresti visualizzare 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 soddisfare questi casi d'uso, è disponibile un meccanismo chiamato CORS (condivisione delle risorse tra origini) per indicare al browser che il caricamento di una risorsa multiorigine è consentito. Per saperne di più su CORS, consulta Condividere in modo sicuro le risorse multiorigine.