In questo codelab, scopri come funziona la stessa origine durante il recupero delle risorse.
Configura: recupera la pagina dalla stessa origine
La demo si trova 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 dovrebbe aver bloccato la richiesta di recupero perché hai richiesto una risorsa di origini diverse. Ciò significa che un utente malintenzionato non può leggere multiorigine anche se hanno assunto il controllo del browser di un utente.
2. Recupera una risorsa multiorigine
Prova a modificare 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 il caricamento di risorse multiorigine script di terze parti o eseguono query su un endpoint API. Per venire incontro a questi casi d'uso, esiste un meccanismo chiamato CORS (condivisione delle risorse tra origini) per indicare browser consente il caricamento di una risorsa multiorigine. Per saperne di più su CORS, vedi Condividere risorse multiorigine in sicurezza.