CORS in due parole
CORS (Cross-Origin Resource Sharing) è un meccanismo di sicurezza dei browser che impedisce a una pagina web di effettuare richieste verso un dominio diverso da quello da cui è stata caricata, a meno che il server di destinazione non lo autorizzi esplicitamente. L'errore CORS appare in console quando questa autorizzazione manca.
Sintomi tipici
In console del browser vedi messaggi come: "Access to fetch at 'https://api.tuosito.it' from origin 'https://app.tuosito.it' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource". La richiesta tecnicamente viene effettuata ma il browser blocca la risposta lato client.
Configurazione lato server
La soluzione corretta è configurare il server backend per rispondere con gli header CORS appropriati. Su Apache aggiungi: Header set Access-Control-Allow-Origin "https://app.tuosito.it". Su Nginx: add_header Access-Control-Allow-Origin https://app.tuosito.it always;. Evita il wildcard * in produzione: limita gli origin autorizzati per ridurre rischi di sicurezza.
Preflight OPTIONS
Per richieste non semplici (PUT, DELETE, custom headers), il browser invia prima una richiesta OPTIONS (preflight). Il server deve rispondere con Access-Control-Allow-Methods e Access-Control-Allow-Headers appropriati. Se il preflight fallisce, anche la richiesta vera fallisce. Verifica la risposta OPTIONS con curl: curl -X OPTIONS -H "Origin: https://app.tuosito.it" -i https://api.tuosito.it/risorsa.
Credenziali e cookie
Se la chiamata include cookie o header di autenticazione, il client deve impostare credentials: "include" in fetch e il server deve rispondere con Access-Control-Allow-Credentials: true. In questo caso NON puoi usare wildcard per Access-Control-Allow-Origin: devi specificare l'origin esatto.
WordPress e API REST
WordPress fornisce API REST. Per autorizzare chiamate cross-origin, usa hook PHP: add_action('rest_api_init', function() { remove_filter('rest_pre_serve_request', 'rest_send_cors_headers'); add_filter('rest_pre_serve_request', function($value) { header('Access-Control-Allow-Origin: https://app.tuosito.it'); return $value; }); }); oppure usa plugin dedicati come "Enable CORS".
Proxy come workaround
Se non puoi modificare il server di destinazione (es. API di terze parti), implementa un reverse proxy sul tuo dominio che inoltra le richieste al servizio esterno. Il browser vede solo richieste same-origin, eliminando il problema CORS. Su Nginx una semplice location /api/ { proxy_pass https://api.terza.com/; } è sufficiente.
Errori da evitare
Non disabilitare la sicurezza del browser con flag come --disable-web-security in Chrome: è una soluzione temporanea solo per debug locale. Non impostare CORS con wildcard in produzione: espone le tue API a richieste da qualsiasi origine, abilitando attacchi CSRF se le richieste sono autenticate via cookie.
Hai bisogno di aiuto?
Se il tuo sito ha problemi di accesso, il team di G Tech Group può aiutarti. Contattaci tramite il modulo di contatto.