Impostare il CORS (Cross-Origin Resource Sharing) per il tuo sito web

Cos'è il CORS?

Il Cross-Origin Resource Sharing (CORS) è un meccanismo basato su intestazioni HTTP che consente di allentare le restrizioni del browser sui requisiti cross-origin. In parole semplici, quando una pagina web (ad esempio, una pagina su example.com) cerca di richiedere risorse da un dominio diverso (ad esempio, api.example.net), il browser per impostazione predefinita blocca tale richiesta a causa della stessa politica di origine del browser. Il CORS consente al server di aggiungere intestazioni specifiche nella risposta, informando il browser su quali origini possono accedere alle risorse, consentendo così un accesso cross-origin sicuro.

Perché usare il CORS?

Quando la tua applicazione front-end (ad esempio, una SPA in esecuzione su app.example.com) ha bisogno di ottenere dati da un'API di backend (ad esempio, in esecuzione su api.example.com), è molto probabile che tu debba utilizzare il CORS.

Dettagli sui parametri del CORS

Di seguito sono elencati alcuni parametri comuni del CORS e il loro significato:

1. Access-Control-Allow-Origin:

   • Significato: Specifica quali origini sono autorizzate ad accedere alle risorse.
   • Valori:
     • *: consente richieste da qualsiasi dominio (non raccomandato in ambienti di produzione per motivi di sicurezza).
     • https://example.com: consente solo richieste da https://example.com.
     • https://example.com https://www.example.net: consente solo richieste da https://example.com e https://www.example.net.
   • Nota Importante: Quando una richiesta include l'intestazione Authorization, Access-Control-Allow-Origin non può essere impostato su *, deve essere impostato su un dominio specifico, altrimenti la richiesta cross-origin fallirà.

2. Access-Control-Allow-Methods:

   • Significato: Specifica i metodi HTTP consentiti (ad esempio, GET, POST, PUT, DELETE).
   • Valori: ad esempio: GET, POST, PUT, DELETE, OPTIONS
   • Nota Importante: Se la tua richiesta include intestazioni personalizzate o utilizza i metodi PUT o DELETE, devi dichiarare qui il metodo OPTIONS, altrimenti il browser invierà prima una richiesta di preflight OPTIONS. Se la risposta della richiesta di preflight non dichiara il metodo OPTIONS consentito, la tua richiesta fallirà.

3. Access-Control-Allow-Headers:

   • Significato: Specifica le intestazioni HTTP personalizzate che il client può utilizzare nella richiesta.
   • Valori: ad esempio: Content-Type, Authorization
   • Nota Importante: Se la tua richiesta include intestazioni personalizzate, devi dichiarare qui la loro autorizzazione, altrimenti il browser bloccherà la tua richiesta.

4. Access-Control-Allow-Credentials:

   • Significato: Indica se i cookie o le informazioni di autenticazione HTTP possono essere inclusi in una richiesta cross-origin.
   • Valori: true o false.
   • Nota Importante: Quando impostato su true, il valore di Access-Control-Allow-Origin non può essere un carattere jolly *.

Abilitare e configurare CORS in ServBay

ServBay fornisce un'interfaccia comoda per configurare le impostazioni CORS del sito web, i passaggi specifici sono i seguenti:

1. Seleziona sito web: Nella barra laterale sinistra dell'interfaccia principale di ServBay, clicca sulle opzioni “Sito web”. Scegli il sito per il quale desideri configurare il CORS dalla lista dei siti.
2. Accedi alla configurazione CORS: Nella schermata di configurazione del sito, trova la sezione “CORS”. ServBay ha il CORS disabilitato per impostazione predefinita, devi attivarlo manualmente spostando l'interruttore da "disabilitato" a "abilitato".
3. Configura Access-Control-Allow-Origin: Nella casella di input di Access-Control-Allow-Origin, inserisci i nomi di dominio consentiti, separati da spazi. Ad esempio: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com.
4. Configura Access-Control-Allow-Methods: Nella casella di input di Access-Control-Allow-Methods, inserisci i metodi HTTP che desideri consentire. Ad esempio: GET, POST, PUT, DELETE, OPTIONS.
5. Configura Access-Control-Allow-Headers: Nella casella di input di Access-Control-Allow-Headers, inserisci le intestazioni che desideri consentire. Ad esempio: Content-Type, Authorization.
6. Abilita Allow-Credentials (opzionale): Se desideri consentire i cookie o le informazioni di autenticazione nelle richieste cross-origin, attiva l'interruttore Allow-Credentials. Fai attenzione che, se attivi questa opzione, il valore di Access-Control-Allow-Origin non può essere impostato su *.
7. Salva le impostazioni: Dopo aver completato la configurazione, clicca sul pulsante "Salva" in basso a destra per applicare le modifiche.

Esempio

Secondo lo screenshot sopra, le impostazioni di CORS per il sito “ServBay Testing” sono le seguenti:

• Access-Control-Allow-Origin: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: Abilitato.

Ciò significa che le richieste provenienti dai domini sopra menzionati possono accedere alle risorse del sito servbay.new e possono inviare richieste utilizzando i metodi GET, POST, PUT, DELETE, OPTIONS, oltre a portare intestazioni di richiesta Content-Type e Authorization e informazioni sui cookie.

Considerazioni

• Sicurezza: In un ambiente di produzione, evita di utilizzare il jolly * come valore di Access-Control-Allow-Origin.
• Cache: I browser potrebbero memorizzare nella cache le risposte CORS, quindi dopo aver modificato le impostazioni CORS, potrebbe essere necessario svuotare la cache del browser.
• Configurazione del codice: In alcuni casi, oltre a configurare il CORS sul server web, è necessario configurarlo anche nel codice (Laravel).
• Situazioni complesse: Per scenari cross-origin più complessi, potresti dover combinare CORS con altre tecnologie, come JSONP o server proxy.

Seguendo questi passaggi, puoi facilmente abilitare e configurare il CORS per il tuo sito web in ServBay, assicurando che le tue richieste cross-origin possano procedere senza problemi.

Spero che questo documento possa aiutarti a comprendere e utilizzare meglio la funzionalità CORS di ServBay. Se hai domande, non esitare a chiedere.