Guida per principianti su CORS (Condivisione delle risorse tra origine crociata)
Ciao a tutti, aspiranti sviluppatori web! Oggi ci imbarcheremo in un viaggio emozionante nel mondo del CORS. Non preoccupatevi se non avete mai sentito parlare di esso - alla fine di questo tutorial, sarete esperti di CORS! Allora, prendete la vostra bevanda preferita, fatevi comodi e tuffiamoci dentro!
Cos'è il CORS?
CORS sta per Cross-Origin Resource Sharing (Condivisione delle risorse tra origine crociata). So che sembra un bel pezzo di parola, ma lasciate che vi spieghi con una simpatica analogia.
Immaginate di essere in un ristorante elegante (il vostro browser web) e volete ordinare cibo da un altro ristorante dall'altra parte della strada (un altro sito web). Normalmente, il ristorante elegante non lo permetterebbe perché vuole che mangiate solo il loro cibo. Ma con il CORS, è come se il ristorante elegante dicesse: "Certo, vai pure a ordinare dall'altra parte della strada!" È un modo per i browser web di permettere in sicurezza ai siti di richiedere risorse da altri siti.
Perché abbiamo bisogno del CORS?
Ai tempi antichi del web, i browser avevano una rigorosa politica di sicurezza chiamata Politica dell'Origine Uguale. Questa politica impediva ai siti web di fare richieste ad altri domini, il che era ottimo per la sicurezza ma non così grande per la funzionalità.
Mentre il web evolveva, gli sviluppatori avevano bisogno di un modo per fare richieste cross-origin in sicurezza. È qui che è entrato in gioco il CORS, fornendo un metodo sicuro per i server di rilassare la Politica dell'Origine Uguale e permettere alcune richieste cross-origin.
Come funziona il CORS?
Il CORS funziona attraverso una serie di intestazioni HTTP. Quando una pagina web fa una richiesta a un dominio diverso, il browser aggiunge un'intestazione speciale chiamata Origin alla richiesta. Il server poi risponde con intestazioni che dicono al browser se la richiesta è permessa.
Guardiamo un esempio semplice:
<!DOCTYPE html>
<html>
<head>
<title>Esempio CORS</title>
</head>
<body>
<h1>CORS in azione</h1>
<button onclick="makeRequest()">Fai una richiesta</button>
<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Errore:', error));
}
</script>
</body>
</html>In questo esempio, quando cliccate sul pulsante, tenta di ottenere dati da https://api.example.com/data. Se il server su api.example.com ha configurato correttamente il CORS, includerà intestazioni nella sua risposta che permetteranno alla vostra pagina web di accedere ai dati.
Fare una richiesta CORS
Ora, approfondiamo come fare una richiesta CORS. Useremo l'API Fetch, che è un modo moderno e potente per fare richieste di rete in JavaScript.
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Errore:', error));Questo codice invia una richiesta GET a https://api.example.com/data. La risposta del server determinerà se la richiesta è riuscita o meno.
Se il CORS è configurato correttamente sul server, vedrete i dati registrati nella console. Se non lo è, otterrete un errore CORS, che potrebbe sembrare qualcosa del genere:
Accesso a 'https://api.example.com/data' dall'origine 'http://yourwebsite.com' è stato bloccato dalla politica CORS: Nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta.Non preoccupatevi se vedete questo errore! Significa solo che il server non è configurato per permettere richieste dal vostro sito web.
Gestori di eventi in CORS
Quando si lavora con il CORS, è importante gestire sia le risposte positive che gli errori. Modifichiamo il nostro esempio precedente per includere alcuni gestori di eventi:
<!DOCTYPE html>
<html>
<head>
<title>CORS con gestori di eventi</title>
</head>
<body>
<h1>CORS con gestori di eventi</h1>
<button onclick="makeRequest()">Fai una richiesta</button>
<div id="result"></div>
<script>
function makeRequest() {
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('La risposta di rete non era_OK');
}
return response.json();
})
.then(data => {
document.getElementById('result').textContent = JSON.stringify(data);
})
.catch(error => {
console.error('Errore:', error);
document.getElementById('result').textContent = 'Si è verificato un errore: ' + error.message;
});
}
</script>
</body>
</html>In questo esempio, abbiamo aggiunto gestori di eventi per le risposte positive e gli errori. Se la richiesta ha successo, mostriamo i dati sulla pagina. Se c'è un errore, mostriamo un messaggio di errore.
Metodi CORS
Il CORS supporta vari metodi HTTP. Ecco una tabella che riassume i più comuni:
| Metodo | Descrizione |
|---|---|
| GET | Recupera dati dal server |
| POST | Invia dati al server per creare una nuova risorsa |
| PUT | Invia dati per aggiornare una risorsa esistente sul server |
| DELETE | Richiede la rimozione di una risorsa sul server |
| HEAD | Simile a GET, ma recupera solo le intestazioni, non il corpo |
| OPTIONS | Utilizzato per descrivere le opzioni di comunicazione per la risorsa di destinazione |
Ricordate, il server deve essere configurato per permettere questi metodi per le richieste CORS.
Conclusione
Congratulations! You've just taken your first steps into the world of CORS. We've covered what CORS is, why it's necessary, and how to make basic CORS requests. Remember, CORS is all about making the web more interconnected while maintaining security.
As you continue your web development journey, you'll encounter CORS in many different scenarios. Don't be afraid of those CORS errors – they're just opportunities to learn more about how the web works!
Keep practicing, stay curious, and happy coding!
Credits: Image by storyset