Comment corriger l’erreur ‘Blocked by CORS policy’ sur WordPress ? Guide complet

Comprendre l’erreur ‘Blocked by CORS policy’ sur WordPress

L’erreur ‘Blocked by CORS policy’ est un problème fréquent sur WordPress, surtout lorsqu’on intègre des ressources externes comme des polices, des images ou des API. CORS signifie Cross-Origin Resource Sharing (partage de ressources entre origines multiples). Cette politique de sécurité du navigateur empêche un site web d’accéder à des ressources provenant d’une origine différente (domaine, protocole ou port) sans autorisation explicite. Sur WordPress, cette erreur se manifeste souvent lors de l’utilisation de thèmes ou plugins qui chargent du contenu depuis des CDN, des API tierces ou des sous-domaines.

Pourquoi l’erreur ‘Blocked by CORS policy’ se produit-elle sur WordPress ?

Plusieurs causes peuvent déclencher cette erreur sur votre site WordPress :

• Appels AJAX cross-origin : lorsque votre site tente d’effectuer une requête AJAX vers un domaine différent sans les en-têtes CORS appropriés.
• Polices et scripts de CDN : certains thèmes chargent des polices Google Fonts ou des scripts depuis des CDN sans configuration CORS.
• Plugins de cache ou de sécurité : ils peuvent modifier les en-têtes HTTP et supprimer les autorisations CORS.
• API REST WordPress : des requêtes vers l’API REST depuis un domaine externe peuvent être bloquées.
• Mauvaise configuration du serveur : le serveur n’envoie pas les en-têtes Access-Control-Allow-Origin nécessaires.

Comment diagnostiquer l’erreur ‘Blocked by CORS policy’ sur WordPress ?

Avant de corriger l’erreur, il faut l’identifier précisément. Ouvrez la console de votre navigateur (F12) et allez dans l’onglet Console. Recherchez un message similaire à :

Access to fetch at ‘https://exemple.com’ from origin ‘https://votresite.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Notez l’URL de la ressource bloquée et l’origine du site. Cela vous aidera à cibler la solution.

Solutions pour corriger l’erreur ‘Blocked by CORS policy’ sur WordPress

1. Ajouter les en-têtes CORS via le fichier .htaccess

Si vous avez accès au fichier .htaccess de votre serveur Apache, vous pouvez ajouter les en-têtes CORS pour autoriser des origines spécifiques. Par exemple, pour autoriser toutes les origines (déconseillé en production) :

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Pour autoriser une origine spécifique :

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://exemple.com"
</IfModule>

Placez ces lignes avant la balise # BEGIN WordPress.

2. Configurer les en-têtes CORS via functions.php

Vous pouvez également ajouter des en-têtes CORS directement dans le fichier functions.php de votre thème WordPress. Ajoutez ce code :

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

Pour une origine spécifique, remplacez * par l’URL souhaitée. Attention, cette méthode affecte toutes les réponses de votre site.

3. Utiliser un plugin WordPress pour gérer CORS

Si vous préférez une solution sans code, plusieurs plugins peuvent vous aider :

• WP CORS : un plugin simple qui permet d’ajouter des en-têtes CORS via l’interface d’administration.
• Enable CORS : un autre plugin léger pour activer CORS facilement.
• Custom Headers : permet d’ajouter des en-têtes personnalisés, y compris CORS.

Installez et activez le plugin, puis configurez les origines autorisées dans ses paramètres.

4. Corriger les erreurs CORS pour les polices Google Fonts

Si l’erreur concerne les polices Google Fonts, assurez-vous que votre thème utilise l’API Google Fonts correcte. Parfois, le problème vient du CDN utilisé. Vous pouvez essayer de charger les polices localement ou d’ajouter l’en-tête Access-Control-Allow-Origin pour le domaine fonts.googleapis.com.

5. Résoudre les problèmes CORS avec l’API REST WordPress

Pour les requêtes vers l’API REST WordPress depuis un domaine externe, vous devez autoriser CORS. Ajoutez dans functions.php :

function add_cors_http_headers(){
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
    header("Access-Control-Allow-Headers: Content-Type, Authorization");
}
add_action('rest_api_init', 'add_cors_http_headers', 15);

6. Vérifier les conflits avec les plugins de sécurité ou de cache

Certains plugins comme Wordfence, Sucuri ou W3 Total Cache peuvent bloquer les en-têtes CORS. Désactivez temporairement ces plugins pour voir si l’erreur disparaît. Si c’est le cas, ajustez leurs paramètres pour autoriser les origines nécessaires.

Précautions à prendre lors de la correction de l’erreur CORS

• Évitez d’utiliser l’origine générique ‘*’ en production, car cela expose votre site à des risques de sécurité. Privilégiez les origines spécifiques.
• Testez toujours les modifications dans un environnement de staging avant de les appliquer en production.
• Sauvegardez votre site avant de modifier des fichiers sensibles comme .htaccess ou functions.php.
• Utilisez des outils en ligne comme CORS Checker pour valider que vos en-têtes sont correctement envoyés.

Exemple concret : corriger l’erreur CORS pour un appel AJAX

Supposons que vous ayez un formulaire sur votre site WordPress qui envoie des données vers une API externe via AJAX. L’erreur CORS apparaît. Voici les étapes :

1. Identifiez l’URL de l’API externe.
2. Ajoutez l’en-tête Access-Control-Allow-Origin dans la réponse du serveur de l’API (si vous contrôlez ce serveur).
3. Si vous ne contrôlez pas l’API, vous devez utiliser un proxy ou une solution côté client comme mode: 'no-cors' (mais cela limite les données reçues).
4. Sur votre site WordPress, assurez-vous que les en-têtes CORS sont autorisés pour l’origine de l’API.

Conclusion : maîtrisez l’erreur ‘Blocked by CORS policy’ sur WordPress

L’erreur ‘Blocked by CORS policy’ peut sembler complexe, mais avec les bonnes méthodes, elle se résout facilement. Que vous choisissiez de modifier le fichier .htaccess, d’utiliser functions.php ou d’installer un plugin, l’important est de comprendre l’origine du blocage. En suivant ce guide, vous pourrez corriger cette erreur et améliorer l’intégration de ressources externes sur votre site WordPress. N’oubliez pas de toujours tester et de sécuriser vos configurations CORS pour éviter les failles.

Photo by Justin Morgan on Unsplash