Impostare il CORS (Cross-Origin Resource Sharing) per i siti in ServBay
Nel moderno sviluppo web, le applicazioni frontend (di solito eseguite sotto un certo dominio) spesso devono accedere a API di backend o ad altri servizi (che possono essere ospitati su domini o porte differenti). La politica Same-Origin dei browser blocca di default queste richieste cross-origin per motivi di sicurezza. Il Cross-Origin Resource Sharing (CORS) è un meccanismo standard che consente al server di dichiarare quali origini possono accedere alle proprie risorse, implementando così in sicurezza l'interazione tra origini diverse.
In questa guida vedrai come configurare e abilitare facilmente il CORS per il tuo sito nell'ambiente di sviluppo locale ServBay, tramite l'interfaccia utente di ServBay.
Che cos'è il CORS?
Cross-Origin Resource Sharing (CORS) è un meccanismo basato su intestazioni HTTP che consente al server di indicare quali origini (domini, protocolli o porte) diverse dalla propria sono autorizzate a caricare risorse. Quando una pagina web tenta di effettuare richieste di risorse a un'origine diversa dalla propria, il browser esegue una "richiesta HTTP cross-origin". In base alla politica Same-Origin del browser, tali richieste vengono bloccate di default. Il CORS offre un modo standard per il server e il browser di comunicare e determinare se una richiesta cross-origin possa essere accolta in sicurezza.
Perché gli sviluppatori devono configurare il CORS?
Se stai sviluppando un'applicazione con frontend e backend separati (ad esempio, frontend su app.servbay.demo
e backend API su api.servbay.demo
), oppure il tuo frontend deve invocare API di terze parti, il browser bloccherà queste richieste cross-origin a causa della politica Same-Origin. La configurazione del CORS serve a dire al browser quali origini sono autorizzate dal server ad accedere alle sue risorse, risolvendo così i problemi di richieste bloccate dalla policy.
Gli header HTTP chiave nel CORS
Quando un server risponde a una richiesta cross-origin, include alcune specifiche intestazioni di risposta HTTP Access-Control-*
. Il browser client usa questi valori per decidere se consentire la richiesta cross-origin. Ecco i principali parametri CORS configurabili in ServBay (ognuno corrisponde a una di queste intestazioni HTTP):
Access-Control-Allow-Origin
- Finalità: L’intestazione più importante del CORS, indica le origini autorizzate ad accedere alle risorse (uno o più domini).
- Valori possibili:
*
: permette richieste da qualsiasi origine. Importante: Sebbene sia comodo, usare*
in produzione è sconsigliato perché consente l’accesso alle risorse da qualunque sito, introducendo rischi di sicurezza.https://servbay.demo
: permette solo le richieste provenienti da questa specifica origine.https://servbay.demo https://api.servbay.demo
: permette richieste da più origini, separate da uno spazio.
- Nota: Se hai bisogno che la richiesta cross-origin includa cookie o credenziali HTTP (cioè hai impostato
Access-Control-Allow-Credentials: true
), alloraAccess-Control-Allow-Origin
non può essere impostato a*
, ma deve indicare una o più origini specifiche.
Access-Control-Allow-Methods
- Finalità: Indica quali metodi HTTP (ad es.
GET
,POST
,PUT
,DELETE
,OPTIONS
) sono consentiti nelle richieste cross-origin. - Valori possibili: Ad esempio:
GET, POST, PUT, DELETE, OPTIONS
. Separare i metodi con una virgola. - Nota: Per le "richieste non semplici" (ad esempio con
PUT
oDELETE
o contenenti header personalizzati), il browser prima invierà una richiesta "preflight" con metodoOPTIONS
. Il server deve rispondere a questa richiesta preflight, includendo le intestazioniAccess-Control-Allow-Methods
necessarie a informare il browser su quali metodi siano permessi. Per questo motivo, includere sempreOPTIONS
nei metodi autorizzati è buona pratica.
- Finalità: Indica quali metodi HTTP (ad es.
Access-Control-Allow-Headers
- Finalità: Specifica quali intestazioni HTTP personalizzate possono essere inviate nelle richieste cross-origin.
- Valori possibili: Ad esempio:
Content-Type, Authorization, X-Requested-With
. Separare le intestazioni con una virgola. - Nota: Se la richiesta frontend utilizza intestazioni diverse da quelle "semplici" di default (
Accept
,Accept-Language
,Content-Language
, oppure ilContent-Type
limitato aapplication/x-www-form-urlencoded
,multipart/form-data
otext/plain
), il browser invierà una preflight. In tal caso, devi elencare esplicitamente qui gli header personalizzati ammessi.
Access-Control-Allow-Credentials
- Finalità: Indica se è permesso alle richieste cross-origin di includere credenziali dell’utente, come cookie, certificati SSL del client o autenticazione HTTP.
- Valori possibili:
true
ofalse
. - Nota: Quando impostato su
true
, come detto sopra, il valore diAccess-Control-Allow-Origin
non può essere il carattere jolly*
. Inoltre, anche il codice frontend deve impostare la flag appropriata (ad esempioxhr.withCredentials = true
ofetch(url, { credentials: 'include' })
).
Abilitare e configurare il CORS in ServBay
ServBay offre una comoda interfaccia grafica che permette di configurare il CORS in modo indipendente per ciascun sito. Ecco come procedere:
- Apri ServBay e accedi all'elenco dei siti: Avvia l’applicazione ServBay. Nella barra di navigazione a sinistra della schermata principale, clicca su "Siti". Vedrai l’elenco di tutti i siti locali configurati in ServBay.
- Seleziona il sito da configurare: Nell’elenco dei siti, trova quello per cui vuoi abilitare e configurare il CORS. Clicca sul nome per accedere alla schermata di configurazione.
- Trova e attiva le impostazioni CORS: Scorri nella sezione centrale della pagina di configurazione del sito finché non trovi la sezione "CORS". Di default, il CORS è disattivato. Clicca l’interruttore accanto alla sezione per passare da "disattivato" ad "attivo". A quel punto, le opzioni di configurazione saranno editabili.
- Configura
Access-Control-Allow-Origin
: Nel campo "Access-Control-Allow-Origin", inserisci una o più origini autorizzate ad accedere alle risorse del sito. Se ti servono più origini, separale con uno spazio. Ad esempio:https://frontend.servbay.demo https://anotherapp.servbay.demo
. Evita di usare*
in ambienti di produzione. - Configura
Access-Control-Allow-Methods
: Nel campo "Access-Control-Allow-Methods", inserisci i metodi HTTP che vuoi consentire. Separali con una virgola. Ad esempio:GET, POST, PUT, DELETE, OPTIONS
. Assicurati di includere tutti i metodi di cui la tua app ha bisogno e, di norma, ancheOPTIONS
per supportare le richieste preflight. - Configura
Access-Control-Allow-Headers
: Nel campo "Access-Control-Allow-Headers", inserisci le intestazioni HTTP personalizzate che vuoi permettere nelle richieste cross-origin. Separale con una virgola. Ad esempio:Content-Type, Authorization, X-Custom-Header
. Inserisci solo gli header effettivamente necessari alla tua applicazione. - Configura
Access-Control-Allow-Credentials
(opzionale): Se è necessario consentire alle richieste cross-origin di includere cookie o dati di autenticazione HTTP, attiva l’interruttore accanto a "Allow-Credentials". Importante: se attivi questa opzione, il campoAccess-Control-Allow-Origin
al punto 4 non deve essere impostato su*
. - Salva la configurazione: Dopo aver completato le impostazioni CORS, ricordati di cliccare sul bottone "Salva" in basso a destra. ServBay aggiornerà automaticamente la configurazione del web server (Caddy o Nginx), senza bisogno di riavvio manuale del servizio.
Esempio di configurazione
Di seguito uno screenshot che mostra un esempio di configurazione CORS per il sito "ServBay Demo Website" in ServBay:
Nella configurazione qui sopra:
Access-Control-Allow-Origin
:https://frontend.servbay.demo https://api.servbay.demo
Access-Control-Allow-Methods
:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers
:Content-Type, Authorization
Allow-Credentials
: abilitato (true
)
Questo significa che solo le richieste provenienti da https://frontend.servbay.demo
e https://api.servbay.demo
sono autorizzate ad accedere alle risorse del sito "ServBay Demo Website". Le richieste possono usare i metodi GET
, POST
, PUT
, DELETE
, OPTIONS
, possono includere gli header Content-Type
e Authorization
, e sono autorizzate a portare con sé cookie o credenziali.
Consigli e migliori pratiche
- Priorità alla sicurezza: In fase di sviluppo e test può essere pratico usare
Access-Control-Allow-Origin: *
, ma in ambiente di produzione è fondamentale restringere l’accesso alle origini strettamente necessarie, per una maggiore sicurezza. - Richieste preflight: Comprendere il funzionamento delle richieste preflight (metodo OPTIONS) è essenziale per il debug dei problemi CORS. Verifica sempre che il tuo server (tramite la configurazione su ServBay) risponda correttamente alle richieste preflight.
- Cache del browser: Il browser può memorizzare nella cache le policy CORS. Se riscontri problemi dopo aver modificato la configurazione CORS in ServBay, prova a svuotare la cache del browser o usa la modalità in incognito.
- CORS lato applicazione: Alcuni framework o librerie web (come Laravel, Express.js, Spring Boot, ecc.) permettono di configurare il CORS lato codice applicativo. La configurazione CORS di ServBay agisce a livello di web server (Caddy/Nginx) e ha generalmente priorità. In scenari complessi, potrebbe essere necessario coordinare le policy CORS di server e applicazione.
- Strumenti di debug: Usa gli strumenti per sviluppatori del browser (di solito con F12), in particolare il tab "Network", per controllare le richieste cross-origin e le intestazioni HTTP delle risposte. Questo ti aiuta a diagnosticare la corretta applicazione delle policy CORS e identificare l’origine di eventuali errori.
FAQ – Domande frequenti
D: Ho seguito le istruzioni, ma le richieste cross-origin falliscono comunque. Cosa posso fare?
R: Prova a procedere con questi controlli:
- Verifica la console e la scheda Network del browser: Di solito il browser mostra errori CORS nella console e nella rete trovi dettagli su tutte le intestazioni delle richieste e risposte. Controlla che siano presenti le intestazioni
Access-Control-Allow-Origin
,Access-Control-Allow-Methods
eAccess-Control-Allow-Headers
e che i valori corrispondano alle richieste del client. - Confronta gli indirizzi origine: Assicurati che l’origine impostata in
Access-Control-Allow-Origin
(protocollo, dominio, porta) corrisponda esattamente a quella da cui parte la richiesta frontend. - Controlla metodi e header: Verifica che
Access-Control-Allow-Methods
contenga i metodi HTTP che usi e cheAccess-Control-Allow-Headers
comprenda tutti gli header personalizzati delle tue richieste. - Problemi di credenziali: Se serve trasmettere cookie o altre credenziali, assicurati che in ServBay sia abilitato
Allow-Credentials
e cheAccess-Control-Allow-Origin
non sia*
. Il tuo codice client dovrà inoltre abilitare l’invio delle credenziali (es.withCredentials = true
). - Richieste preflight: Per richieste non semplici, controlla se il browser invia una richiesta
OPTIONS
preflight e se il server risponde con le intestazioni CORS corrette. - Salvataggio su ServBay: Dopo aver modificato la configurazione in ServBay, assicurati di aver cliccato su "Salva".
D: È possibile impostare una policy CORS globale per tutti i siti?
R: Le impostazioni CORS in ServBay sono indipendenti per ogni sito, così da offrire maggiore flessibilità e sicurezza. L’interfaccia UI di ServBay attualmente non prevede una configurazione CORS globale. Se vuoi applicare criteri simili su più siti, dovrai ripetere la configurazione su ognuno.
D: Come gestisce ServBay la configurazione CORS?
R: ServBay utilizza Caddy o Nginx come web server sottostanti. Le impostazioni CORS inserite tramite la UI vengono convertite automaticamente da ServBay nelle corrispondenti direttive nei file di configurazione di Caddyfile o Nginx. ServBay si occupa direttamente della gestione e del reload di questi file, senza necessità di intervento manuale.
Conclusioni
Attraverso l’intuitiva interfaccia grafica di ServBay puoi facilmente abilitare e configurare la gestione CORS per i siti nel tuo ambiente locale di sviluppo, risolvendo efficacemente i problemi di accesso cross-origin. Comprendere e impostare correttamente intestazioni chiave come Access-Control-Allow-Origin
, Access-Control-Allow-Methods
, Access-Control-Allow-Headers
e Access-Control-Allow-Credentials
è fondamentale per assicurare sicurezza e funzionalità alle richieste cross-origin. Seguendo questa guida e le best practice riportate, potrai ottimizzare la produttività nello sviluppo web locale con ServBay.