In questo articolo
Cos'e CORS?
Cross-Origin Resource Sharing (CORS) e un meccanismo di sicurezza del browser che controlla quali origini web possono accedere alle risorse del tuo server. Per impostazione predefinita, i browser applicano la politica same-origin, bloccando le richieste JavaScript verso un dominio, porta o protocollo diverso.
Gli header CORS indicano al browser quali richieste cross-origin consentire. Senza gli header corretti, le chiamate API da un frontend su un dominio a un backend su un altro falliranno con un errore CORS. Un generatore di header CORS crea gli header Access-Control-Allow-* corretti.
Come funzionano gli header CORS
CORS funziona attraverso un insieme di header di risposta HTTP che il server invia per indicare quali origini, metodi e header sono consentiti.
- Access-Control-Allow-Origin — specifica quali origini possono accedere alla risorsa (un dominio specifico o * per qualsiasi origine)
- Richieste preflight — per richieste non semplici, i browser inviano prima una richiesta OPTIONS per verificare se la richiesta effettiva e consentita
- Gestione credenziali — Access-Control-Allow-Credentials: true consente cookie e header di autenticazione, ma richiede un'origine specifica
Prova gratuitamente — nessuna registrazione richiesta
Generare header CORS →Quando configurare CORS
La configurazione CORS e necessaria quando frontend e backend vengono serviti da origini diverse.
- Sviluppo API — le API REST o GraphQL accessibili da app frontend su domini diversi necessitano di header CORS
- Configurazione CDN — servire asset statici da un sottodominio CDN richiede CORS per file di font e richieste API
- Microservizi — servizi in esecuzione su porte diverse durante lo sviluppo locale necessitano di CORS per comunicare attraverso il browser
Domande frequenti
Perche non posso usare Access-Control-Allow-Origin: * per tutto?
Il carattere jolly * consente qualsiasi origine, il che va bene per le API pubbliche. Tuttavia, non puo essere usato con le credenziali (cookie, header Authorization). Se la tua API richiede autenticazione, devi specificare l'origine esatta.
Cos'e una richiesta preflight?
Un preflight e una richiesta HTTP OPTIONS che il browser invia automaticamente prima della richiesta effettiva. Verifica se il server consente il metodo, gli header e l'origine.
Come correggo l'errore 'No Access-Control-Allow-Origin header'?
Aggiungi l'header Access-Control-Allow-Origin alla risposta del tuo server con il dominio dell'origine richiedente. Per Express usa il middleware cors, per Nginx aggiungi direttive add_header.