Registrati 
Accedi 
Negli ultimi anni, lo sviluppo web ha visto un significativo aumento della complessità e della sicurezza delle applicazioni. Uno degli aspetti fondamentali da considerare è la comunicazione tra server e client, che spesso avviene attraverso richieste HTTP. Tuttavia, quando si opera con risorse distribuite su diversi domini, gli sviluppatori possono imbattersi in un problema noto come “errore di CORS”. In questo articolo, esploreremo cos’è CORS, perché blocca le richieste e come risolverlo in modo efficace.
Che cos’è CORS?
CORS, acronimo di Cross-Origin Resource Sharing, è una politica di sicurezza implementata nei browser che consente o nega il caricamento di risorse provenienti da un dominio diverso da quello della pagina web che le richiede. Questa politica è stata introdotta per prevenire attacchi di tipo cross-site scripting (XSS) e altre vulnerabilità che potrebbero compromettere la sicurezza delle applicazioni web.
Perché CORS blocca le richieste?
Quando un’applicazione web cerca di accedere a risorse da un dominio diverso, il browser esegue una serie di controlli di sicurezza. Se la risorsa non è correttamente configurata per consentire l’accesso da origini diverse, il browser blocca la richiesta e restituisce un errore di CORS. Questo comportamento è progettato per proteggere gli utenti da potenziali minacce.
Ad esempio, consideriamo una situazione in cui il tuo sito web, https://tuosito.com, tenta di accedere a un’API situata su https://api.terzosito.com. Se l’API non è configurata per consentire richieste da https://tuosito.com, il browser emetterà un errore di CORS. Questo accade perché il browser non riceve le intestazioni di autorizzazione necessarie per completare la richiesta.
Tipi di richieste CORS
Ci sono due tipi fondamentali di richieste CORS: richieste semplici e richieste preflight.
Richieste semplici
Le richieste semplici sono quelle che soddisfano determinati criteri e vengono inviate direttamente dal browser. Esempi di richieste semplici includono richieste GET e POST con tipi di contenuto standard, come application/x-www-form-urlencoded, multipart/form-data o text/plain.
Richieste preflight
Le richieste preflight vengono effettuate quando il browser invia una richiesta OPTIONS prima di inviare la richiesta effettiva. Questo accade quando si utilizzano metodi HTTP non standard o intestazioni personalizzate. Il browser invia una richiesta per verificare se il server consente la richiesta originale.
OPTIONS /api/resource HTTP/1.1
Host: api.terzosito.com
Origin: https://tuosito.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header
Come risolvere gli errori di CORS
Affrontare gli errori di CORS richiede una comprensione sia del lato client che del lato server. Ecco alcune strategie per risolvere i problemi di CORS.
1. Configurare il server per consentire CORS
La soluzione più comune per gli errori di CORS è configurare il server in modo che accetti richieste da origini specifiche. Questo può essere fatto aggiungendo l’intestazione Access-Control-Allow-Origin nella risposta del server.
Access-Control-Allow-Origin: https://tuosito.com
Se desideri consentire tutte le origini, puoi utilizzare l’asterisco:
Access-Control-Allow-Origin: *
Tuttavia, è importante notare che l’uso dell’asterisco può comportare rischi per la sicurezza e dovrebbe essere usato con cautela.
2. Aggiungere intestazioni CORS specifiche
Oltre a Access-Control-Allow-Origin, potresti dover aggiungere altre intestazioni per supportare specifiche funzionalità. Ad esempio, se la tua richiesta utilizza metodi HTTP non standard, dovrai includere:
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header
3. Gestire le richieste preflight
Se stai utilizzando richieste preflight, assicurati che il server risponda correttamente alla richiesta OPTIONS. La risposta dovrebbe includere le intestazioni appropriate per consentire la richiesta originale.
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://tuosito.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header
4. Modificare il codice client
In alcuni casi, potresti dover modificare il codice client per evitare di attivare CORS. Ad esempio, se stai lavorando con un framework JavaScript come Axios, puoi configurare il tuo codice per utilizzare richieste semplici, evitando l’uso di intestazioni personalizzate.
axios.get('https://api.terzosito.com/resource')
.then(response => console.log(response))
.catch(error => console.error(error));
Esempi pratici di configurazione CORS
Di seguito sono riportati alcuni esempi pratici di configurazione CORS per vari server.
Configurazione CORS su un server Node.js
Se utilizzi Node.js con Express, puoi utilizzare il middleware cors per gestire facilmente le intestazioni CORS:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
origin: 'https://tuosito.com'
}));
app.get('/api/resource', (req, res) => {
res.json({ message: 'Hello World' });
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
Configurazione CORS su un server Apache
Per configurare CORS su un server Apache, puoi aggiungere le seguenti direttive nel file di configurazione o nel file .htaccess:
Header set Access-Control-Allow-Origin "https://tuosito.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "X-Custom-Header"
Configurazione CORS su un server Nginx
Se utilizzi Nginx, puoi aggiungere le seguenti righe al tuo blocco di server:
add_header 'Access-Control-Allow-Origin' 'https://tuosito.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'X-Custom-Header';
Strumenti per il debug degli errori di CORS
Quando si affrontano errori di CORS, è essenziale avere a disposizione strumenti di debug. Ecco alcuni strumenti utili:
-
Console del browser: La console degli sviluppatori del browser fornisce messaggi di errore dettagliati relativi a CORS, che possono aiutarti a identificare il problema.
-
Postman: Postman consente di testare le API senza restrizioni di CORS, rendendolo uno strumento utile per verificare le risposte del server.
-
cURL: Utilizza cURL per testare richieste API da riga di comando, consentendo di vedere le intestazioni di risposta senza restrizioni di CORS.
Conclusione
Gli errori di CORS possono rappresentare una sfida significativa per gli sviluppatori, ma comprendere come funziona CORS e come configurare correttamente il server può aiutare a risolvere questi problemi. È fondamentale adottare un approccio sicuro e consapevole quando si gestiscono le intestazioni CORS, per garantire che le applicazioni web rimangano protette mentre si sfruttano le risorse esterne. Seguendo le best practice e utilizzando gli strumenti di debug appropriati, è possibile affrontare e risolvere gli errori di CORS in modo efficace, migliorando così l’esperienza utente e la funzionalità delle applicazioni web.
