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):

1. 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), allora Access-Control-Allow-Origin non può essere impostato a *, ma deve indicare una o più origini specifiche.

2. 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 o DELETE o contenenti header personalizzati), il browser prima invierà una richiesta "preflight" con metodo OPTIONS. Il server deve rispondere a questa richiesta preflight, includendo le intestazioni Access-Control-Allow-Methods necessarie a informare il browser su quali metodi siano permessi. Per questo motivo, includere sempre OPTIONS nei metodi autorizzati è buona pratica.

3. 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 il Content-Type limitato a application/x-www-form-urlencoded, multipart/form-data o text/plain), il browser invierà una preflight. In tal caso, devi elencare esplicitamente qui gli header personalizzati ammessi.

4. 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 o false.
   • Nota: Quando impostato su true, come detto sopra, il valore di Access-Control-Allow-Origin non può essere il carattere jolly *. Inoltre, anche il codice frontend deve impostare la flag appropriata (ad esempio xhr.withCredentials = true o fetch(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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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, anche OPTIONS per supportare le richieste preflight.
6. 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.
7. 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 campo Access-Control-Allow-Origin al punto 4 non deve essere impostato su *.
8. 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:

1. 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 e Access-Control-Allow-Headers e che i valori corrispondano alle richieste del client.
2. 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.
3. Controlla metodi e header: Verifica che Access-Control-Allow-Methods contenga i metodi HTTP che usi e che Access-Control-Allow-Headers comprenda tutti gli header personalizzati delle tue richieste.
4. Problemi di credenziali: Se serve trasmettere cookie o altre credenziali, assicurati che in ServBay sia abilitato Allow-Credentials e che Access-Control-Allow-Origin non sia *. Il tuo codice client dovrà inoltre abilitare l’invio delle credenziali (es. withCredentials = true).
5. 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.
6. 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.