Come correggere l'errore CORS in WordPress? (Guida semplice)

Se gestisci un sito web, è inevitabile riscontrare degli errori e uno di questi, sebbene non sia tra gli errori più comuni di WordPress, è l'errore CORS.

Questo errore si verifica quando il tuo sito WordPress tenta di accedere alle risorse da un'origine diversa (dominio, protocollo o porta) e il server che ospita tali risorse non lo consente. 

Risolvere gli errori CORS è fondamentale, poiché possono interrompere funzioni essenziali come le chiamate API, il caricamento dei font e le richieste AJAX, con un impatto negativo sulle prestazioni del sito e sull'esperienza utente.

Questa guida fornisce una panoramica dei passaggi che puoi seguire per identificare e correggere gli errori CORS in WordPress, assicurandoti che il tuo sito web rimanga funzionale e intuitivo.

TL;DR: Risoluzione dei problemi di condivisione delle risorse tra origini (CORS)

• Questo errore si verifica quando il tuo sito richiede risorse da un altro dominio senza le autorizzazioni appropriate. I browser bloccano la richiesta per proteggere la sicurezza degli utenti.

• Può interrompere le chiamate API, i font, le risorse CDN, le richieste AJAX e i widget incorporati, influendo sulle prestazioni e sull'esperienza utente.

• Identifica il problema utilizzando la console del browser e la scheda di rete. Cerca richieste bloccate e intestazioni Access-Control-Allow-Origin mancanti.

• Risolvi il problema aggiornando le impostazioni del server, htaccess, le funzioni del tema, le regole CDN o contattando il fornitore delle risorse per una configurazione corretta.

Che cos'è un errore CORS?

Cross-Origin Resource Sharing (CORS) è una funzionalità di sicurezza implementata dai browser Web per impedire ai siti Web dannosi di accedere a informazioni sensibili su altri siti senza autorizzazione.

Funziona verificando se il server che ospita la risorsa include intestazioni specifiche che concedono l'autorizzazione per richieste multiorigine. 

Un errore CORS si verifica quando una pagina web tenta di accedere alle risorse da un dominio, protocollo o porta diversi, ma il server non lo consente.

Gli scenari tipici in cui si verificano errori CORS in WordPress includono:

• Recupero di dati API esterni: quando il tuo sito WordPress tenta di ottenere dati da un'API esterna, potrebbe verificarsi un errore CORS se il server API non consente al tuo sito di accedere alle sue risorse.

• Caricamento di font da un altro dominio: se utilizzi font personalizzati ospitati su un dominio diverso, potresti riscontrare errori CORS se il server dei font non consente al tuo sito di caricare questi font.

• Utilizzo di una CDN per risorse statiche: quando immagini, file CSS o JavaScript vengono forniti da una CDN, possono verificarsi errori CORS se il CDN non dispone delle intestazioni corrette per consentire al sito di accedere a questi file.

• Esecuzione di richieste AJAX: se il tuo sito WordPress effettua AJAX a un endpoint API REST personalizzato su un sottodominio diverso, potrebbero verificarsi errori CORS se il server API non consente esplicitamente tali richieste.

• Incorporamento di widget di terze parti: Infine, l'incorporamento di widget provenienti da altri domini tramite iframe può causare errori CORS se il server del widget non consente l'accesso cross-origin.

In che modo gli errori CORS influiscono sulla funzionalità del sito web e sull'esperienza utente?

Gli errori CORS possono bloccare funzionalità cruciali del tuo sito, come il caricamento di dati esterni, font personalizzati o script. Di conseguenza, il tuo sito potrebbe non essere visualizzato correttamente o non funzionare completamente, con conseguente scarsa esperienza utente.

Ad esempio, le funzionalità che si basano su API esterne potrebbero non funzionare, i font personalizzati potrebbero non caricarsi o gli elementi interattivi che utilizzano AJAX potrebbero non funzionare.

Pertanto, la risoluzione degli errori CORS è essenziale per garantire che il tuo sito web funzioni senza problemi e offra un'esperienza utente impeccabile.

Identificazione degli errori CORS in WordPress

Seguendo questi passaggi, puoi identificare facilmente gli errori CORS nel tuo sito WordPress.

Controlla la console del browser: apri gli strumenti per sviluppatori del tuo browser (premendo F12 o facendo clic con il pulsante destro del mouse sulla pagina e selezionando "Ispeziona"). Vai alla scheda "Console" per visualizzare eventuali messaggi di errore.

Nella console, cerca i messaggi che menzionano "Criterio CORS" o "Condivisione risorse tra origini". Questi messaggi indicheranno solitamente che una risorsa è stata bloccata a causa di CORS.

Negli strumenti per sviluppatori, passa alla scheda "Rete" e ricarica la pagina.

• Cerca le richieste contrassegnate in rosso, che indicano che non sono andate a buon fine.
• Fare clic su queste richieste per visualizzare maggiori dettagli sull'errore, inclusi i problemi relativi a CORS.

Revisione delle intestazioni di risposta API: quando si lavora con le API, esaminare le intestazioni di risposta nella scheda "Rete". Verificare che l'intestazione "Access-Control-Allow-Origin" sia presente e configurata correttamente.

Controlla le impostazioni del plugin: se utilizzi plugin che interagiscono con risorse esterne, rivedi le loro impostazioni e la documentazione per assicurarti che gestiscano CORS correttamente.

Utilizza strumenti online: usa strumenti come CORS Checker per verificare se le risorse esterne a cui stai tentando di accedere sono configurate correttamente per consentire le richieste cross-origin.

Leggi di più: Suggerimenti per correggere gli errori di aggiornamento e pubblicazione di WordPress

Esempi di errori CORS in WordPress e passaggi per risolverli

Ecco alcuni scenari comuni in cui si verificano errori CORS in WordPress, insieme a semplici passaggi per risolverli.

Esempio 1: Recupero di dati API esterni

Il tuo sito WordPress tenta di ottenere dati da un'API esterna, ma non ci riesce.

Messaggio di errore:

L'accesso alla richiesta fetch all'indirizzo 'https://api.example.com/data' dall'origine 'https://yourwordpresssite.com' è stato bloccato dalla policy CORS: l'intestazione 'Access-Control-Allow-Origin' non è presente sulla risorsa richiesta.

Metodo per risolvere il problema: modifica il file .htaccess nella directory principale di WordPress:

<IfModule mod_headers.c>Set di intestazioni Access-Control-Allow-Origin "*"</IfModule>

Questo indica al server di consentire a qualsiasi sito di accedere alla risorsa.

Leggi anche: Come correggere gli errori 301 in WordPress

Esempio 2: Caricamento di font da un altro dominio

Il tuo sito WordPress utilizza font personalizzati ospitati su un dominio diverso, ma non vengono caricati.

Messaggio di errore:

L'accesso al font su 'https://fonts.example.com/font.woff2' dall'origine 'https://yourwordpresssite.com' è stato bloccato dalla policy CORS: non è presente alcuna intestazione 'Access-Control-Allow-Origin' sulla risorsa richiesta.

Metodo per risolvere il problema: aggiungi il seguente codice al file functions.php del tuo tema:

funzione add_cors_headers() { header("Access-Control-Allow-Origin: *"); } add_action('init', 'add_cors_headers');

Ciò consente di aggiungere le intestazioni CORS richieste a tutte le risposte.

Esempio 3: utilizzo di una CDN per risorse statiche

Il tuo sito WordPress fornisce immagini, file CSS o JavaScript da una CDN, ma sono bloccati.

Messaggio di errore:

L'accesso allo script su 'https://cdn.example.com/script.js' dall'origine 'https://yourwordpresssite.com' è stato bloccato dalla policy CORS: l'intestazione 'Access-Control-Allow-Origin' contiene più valori '*, *', ma ne è consentito solo uno.

Metodo per risolvere il problema: se utilizzi Apache, puoi aggiungere quanto segue al tuo file di configurazione:

<IfModule mod_headers.c>Set di intestazioni Access-Control-Allow-Origin "*"</IfModule>

Se utilizzi Nginx, aggiungi quanto segue alla tua configurazione:

posizione / { add_header 'Access-Control-Allow-Origin' '*'; }

Esempio 4: creazione di richieste AJAX

Il tuo sito WordPress invia richieste AJAX a un endpoint API REST personalizzato su un sottodominio diverso, ma vengono bloccate.

Messaggio di errore:

L'accesso a XMLHttpRequest su 'https://api.yourwordpresssite.com/endpoint' dall'origine 'https://yourwordpresssite.com' è stato bloccato dalla policy CORS: la risposta alla richiesta preliminare non supera il controllo di accesso: non è presente alcuna intestazione 'Access-Control-Allow-Origin' sulla risorsa richiesta.

Metodo per risolvere il problema: Installa e attiva il plugin Enable CORS, quindi configura le impostazioni per consentire il tuo sottodominio.

Esempio 5: Incorporamento di widget di terze parti

Il tuo sito WordPress incorpora widget di altri domini tramite iframe, ma questi non vengono caricati.

Messaggio di errore:

L'accesso alla risorsa su 'https://widget.example.com/' dall'origine 'https://yourwordpresssite.com' è stato bloccato dalla policy CORS: non è presente alcuna intestazione 'Access-Control-Allow-Origin' sulla risorsa richiesta.

Metodo per risolvere il problema: chiedi al provider di terze parti di aggiungere il tuo dominio all'intestazione Access-Control-Allow-Origin . In alternativa, puoi provare ad aggiungere quanto segue al tuo file .htaccess:

<IfModule mod_headers.c>Set di intestazioni Access-Control-Allow-Origin "*"</IfModule>

Da sapere: cosa sono gli errori 404? Come risolverli

Altri metodi per risolvere gli errori CORS in WordPress

Ecco alcuni metodi aggiuntivi per risolvere gli errori CORS e garantire il funzionamento impeccabile del tuo sito WordPress.

• Utilizzo di Cloudflare: se utilizzi Cloudflare, puoi configurare regole personalizzate per gestire gli header CORS tramite la dashboard di Cloudflare. Cloudflare Workers può anche essere utilizzato per aggiungere o modificare gli header man mano che le richieste attraversano la rete.

• Modifica del file functions.php del tema: Un altro metodo consiste nell'aggiungere del codice al file functions.php del tema. Inserisci il seguente codice per abilitare CORS:

funzione add_cors_headers() { header("Origine di Access-Control-Allow: *"); header("Metodi di Access-Control-Allow: GET, POST, PUT, DELETE, OPTIONS"); header("Intestazioni di Access-Control-Allow: Tipo di contenuto, Autorizzazione"); } add_action('init', 'add_cors_headers');

• Utilizzo del proxy CORS: un proxy CORS funge da server intermediario che gestisce le richieste tra il tuo sito e la risorsa esterna. Aggiunge le intestazioni CORS necessarie prima di inoltrare la risposta al tuo sito.

• Middleware personalizzato: implementa un middleware personalizzato sul tuo server per aggiungere le intestazioni CORS necessarie alle risposte. Questo può essere fatto utilizzando linguaggi di scripting lato server come PHP, Node.js o Python.

• Servizi di terze parti: alcuni servizi e API di terze parti includono il supporto CORS integrato. Consulta la documentazione del servizio esterno per verificare se fornisce opzioni per abilitare CORS per il tuo dominio.

• Contattare il provider del server esterno: contattare il provider della risorsa esterna e richiedere di aggiungere il dominio all'intestazione Access-Control-Allow-Origin .

• Configurazione delle impostazioni del server: è possibile configurare le impostazioni del server per correggere gli errori CORS. Ad esempio, se si utilizza Apache, è possibile aggiungere quanto segue al file di configurazione:

<IfModule mod_headers.c>Set di intestazioni Access-Control-Allow-Origin "*" Set di intestazioni Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" Set di intestazioni Access-Control-Allow-Headers "Content-Type, Authorization"</IfModule>

Per Nginx, puoi usare:

posizione / { if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization'; return 204; } add_header 'Access-Control-Allow-Origin' '*'; }

Come verificare se il problema CORS è stato risolto?

Per prima cosa, aggiorna il tuo sito WordPress per verificare se le modifiche hanno effetto. A volte un semplice aggiornamento può rivelare se l'errore CORS è stato risolto.

• Controlla la console del browser: apri gli strumenti per sviluppatori del tuo browser, vai alla scheda "Console" e cerca eventuali messaggi di errore relativi a CORS. Se non ne trovi, il problema potrebbe essere risolto.

• Revisione delle richieste di rete: passa alla scheda "Rete" negli strumenti per sviluppatori e ricarica la pagina. Qui, verifica se le richieste che in precedenza non andavano a buon fine sono state corrette. Inoltre, fai clic su queste richieste per verificare che le intestazioni siano corrette.

• Funzionalità di test: verifica se le funzionalità che non funzionavano a causa di errori CORS, come chiamate API, caricamento dei font o richieste AJAX, ora funzionano come previsto.

È anche possibile utilizzare gli strumenti di controllo CORS online per verificare se le risorse esterne a cui si sta accedendo sono configurate correttamente per consentire richieste multi-origine.

Scopri: come eseguire un test di usabilità sui siti WordPress

Best Practice per la configurazione CORS

Seguendo queste best practice, puoi configurare CORS in modo sicuro e garantire che il tuo sito WordPress rimanga protetto e funzioni senza problemi.

• Consenti origini specifiche: anziché consentire tutte le origini con un carattere jolly (*), specifica le origini esatte autorizzate ad accedere alle tue risorse. Questo aumenta la sicurezza limitando l'accesso ai domini attendibili.

• Limita i metodi consentiti: consenti solo i metodi HTTP richiesti dalla tua applicazione, come GET, POST e OPTIONS. Questo riduce al minimo il rischio di azioni non autorizzate.

• Limita le intestazioni: consenti solo le intestazioni specifiche di cui la tua applicazione ha bisogno. Questo impedisce l'esposizione non necessaria di informazioni sensibili. Ad esempio, consenti "Content-Type" e "Authorization" se sono obbligatorie.

• Utilizza richieste preliminari: per le richieste che potrebbero influire sui dati del server, assicurati che vengano utilizzate richieste preliminari. Ciò comporta che il browser invii una OPTIONS per verificare le autorizzazioni prima di effettuare la richiesta effettiva.

• Imposta un'età massima appropriata: definisci l' Access-Control-Max-Age per specificare per quanto tempo i risultati di una richiesta preflight possono essere memorizzati nella cache. Ciò riduce il numero di richieste preflight gestite dal server, migliorando le prestazioni.

Infine, rivedi e monitora regolarmente la configurazione CORS per assicurarti che soddisfi i requisiti di sicurezza e funzionalità. Aggiorna le impostazioni man mano che l'applicazione si evolve.

Ulteriori informazioni: ottimizzazione delle prestazioni del database WordPress

Incartare

Risolvere gli errori CORS in WordPress è essenziale per mantenere la funzionalità e l'esperienza utente del tuo sito web.

Comprendendo gli scenari più comuni e applicando le soluzioni appropriate, è possibile risolvere efficacemente questi problemi.

Tuttavia, se i problemi persistono o le soluzioni sembrano troppo complesse, non esitate a chiedere aiuto a un professionista.

professionale WordPress possono offrire assistenza qualificata, garantendo che il tuo sito funzioni senza intoppi e senza interruzioni legate a CORS.

Domande frequenti sull'errore CORS di WordPress