Lorsqu’une application web interagit avec une API REST, il n’est pas rare de rencontrer l’erreur suivante : CORS policy: No 'Access-Control-Allow-Origin' header. Cette erreur, liée à la politique de sécurité des navigateurs, bloque les requêtes entre différentes origines (Cross-Origin Resource Sharing). Dans cet article, nous allons examiner les causes de cette erreur, ses impacts, et les solutions pour la corriger efficacement.
Qu’est-ce que la politique CORS ?
La politique CORS (Cross-Origin Resource Sharing) est une mesure de sécurité mise en œuvre par les navigateurs pour empêcher des requêtes non autorisées entre deux domaines différents. Par défaut, un navigateur bloque une requête HTTP si le domaine de l’application et celui de l’API sont différents, à moins que l’API autorise explicitement ces requêtes via des en-têtes HTTP spécifiques, comme Access-Control-Allow-Origin.
Causes fréquentes de l’erreur CORS
Voici les raisons les plus courantes de l’erreur No 'Access-Control-Allow-Origin' header :
- Absence de configuration CORS sur le serveur : Le serveur de l’API ne renvoie pas l’en-tête
Access-Control-Allow-Origin. - Origine non autorisée : Le domaine de l’application (par exemple,
https://mon-application.com) n’est pas explicitement autorisé par l’API. - Méthode ou en-tête non pris en charge : La méthode HTTP utilisée (comme
POSTouDELETE) ou les en-têtes personnalisés ne sont pas autorisés. - Requêtes préliminaires (preflight) bloquées : Les requêtes
OPTIONSenvoyées par le navigateur pour vérifier les autorisations échouent.
Exemple d’erreur dans la console
Voici un exemple de message d’erreur typique :
<code>
Access to fetch at 'https://api.example.com/data' from origin 'https://myapp.com'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
</code>
Solutions pour corriger cette erreur
La correction de cette erreur dépend de votre contrôle sur le serveur et de votre architecture. Voici plusieurs solutions :
1. Configurer le serveur pour autoriser les requêtes Cross-Origin
Si vous avez accès au serveur de l’API, ajoutez l’en-tête Access-Control-Allow-Origin pour autoriser les requêtes provenant de domaines spécifiques :
<code>
// Exemple en Node.js avec Express
const cors = require('cors');
const app = require('express')();
app.use(cors({ origin: 'https://myapp.com' })); // Autorise uniquement https://myapp.com
app.get('/data', (req, res) => {
res.json({ message: 'Hello, world!' });
});
</code>
2. Autoriser toutes les origines (à éviter en production)
Pour des tests ou des projets internes, vous pouvez autoriser toutes les origines avec * :
<code>
app.use(cors({ origin: '*' })); // Autorise toutes les origines
</code>
Attention : Cette méthode est risquée en production car elle peut exposer votre API à des abus.
3. Configurer des en-têtes personnalisés
Si vous envoyez des en-têtes spécifiques, assurez-vous qu’ils sont autorisés :
<code>
app.use(cors({
origin: 'https://myapp.com',
methods: ['GET', 'POST', 'DELETE', 'PUT'],
allowedHeaders: ['Content-Type', 'Authorization']
}));
</code>
4. Configurer un proxy pour contourner la restriction
Si vous ne pouvez pas modifier le serveur de l’API, configurez un proxy sur votre serveur de développement pour rediriger les requêtes :
<code>
// Exemple de configuration dans webpack.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true
}
}
}
};
</code>
5. Gérer les requêtes préliminaires (preflight)
Assurez-vous que le serveur répond correctement aux requêtes OPTIONS envoyées par le navigateur :
<code>
app.options('*', cors()); // Gère toutes les requêtes préflight
</code>
FAQ : Questions fréquentes
1. Que signifie l’en-tête Access-Control-Allow-Origin ?
Cet en-tête indique quels domaines sont autorisés à accéder aux ressources d’un serveur. Par exemple, Access-Control-Allow-Origin: https://myapp.com autorise uniquement https://myapp.com.
2. Puis-je ignorer les restrictions CORS en local ?
Oui, vous pouvez désactiver temporairement CORS dans votre navigateur pour des tests, mais cela n’est pas recommandé en production. Utilisez plutôt un proxy ou configurez correctement le serveur.
3. Pourquoi les requêtes CORS échouent-elles souvent sur des API publiques ?
De nombreuses API publiques limitent les origines autorisées pour des raisons de sécurité et pour éviter une surcharge de requêtes provenant de domaines non approuvés.
4. Quelle est la différence entre une requête simple et une requête préliminaire ?
Une requête simple utilise des méthodes comme GET ou POST avec des en-têtes standards. Une requête préliminaire (preflight) est une requête OPTIONS envoyée par le navigateur pour vérifier les autorisations avant d’envoyer la requête principale.
5. Comment savoir si le problème vient du serveur ou du navigateur ?
Utilisez des outils comme Postman ou curl pour tester l’API directement. Si la requête fonctionne dans ces outils mais échoue dans le navigateur, le problème vient probablement de la configuration CORS.
Conclusion
L’erreur CORS policy: No 'Access-Control-Allow-Origin' header est un problème courant mais résoluble. En configurant correctement votre serveur ou en utilisant des solutions comme un proxy, vous pouvez contourner ces restrictions et assurer un fonctionnement fluide de votre application. Adoptez des pratiques sécurisées pour éviter d’exposer votre API à des abus.
