Comment résoudre l'erreur CORS dans Axios et y ajouter Access-Control-Allow-Origin ?
Par défaut, afin de protéger au maximum les sites internet contre les intrusions, il n'est pas possible en Ajax de faire des requêtes vers un autre nom de domaine que celui sur lequel la requête est effectuée. Il existe un entête spécifique permettant cependant de désactiver cette sécurité. Il s'agit de l'entête "Access-Control-Allow-Origin".
Que vous utilisiez Axios ou une autre librairie pour effectuer votre requête, le comportement sera le même. Il est en effet impossible d'ajouter cette directive au niveau du client. L'entête doit être émis par le serveur uniquement.
//Cette directive n'a aucun effet axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*',
Vous devez donc configurer le serveur pour qu'il autorise le domaine que vous utilisez avec Axios à accéder aux données. Pour cela, vous pouvez soit utiliser la valeur "*" qui indique qu’on peut effectuer des requêtes depuis n’importe quel domaine, ou bien spécifier les domaines autorisés à effectuer ces requêtes. La configuration dépend ensuite de la technologie utilisée par le serveur.
Si votre domaine est hébergé sur un serveur Apache, la directive "Header" permet d'ajouter l'entête. On peut configurer cette directive pour un hôte virtuel ("<Virtualhost>"), un répertoire ("<Directory>"), une URL particulière ("<Location>") ou des fichiers ("<Files>").
Header set Access-Control-Allow-Origin "*"
Si vous utilisez un serveur Node.js, le framework Express.js peut être configuré pour autoriser les requêtes entre domaines :
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "mon-domaine.fr"),
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"),
next(),
}),
Si votre site internet est hébergé sur un serveur NGINX, alors vous devez utiliser la directive "add_header". On l'utilise dans une section "location".
location / {
add_header 'Access-Control-Allow-Origin' '*',
}
Vous n'avez pas accès à la configuration de votre serveur ? Si votre application utilise le langage PHP, vous pouvez vous servir de la fonction "header()", qui permet d'envoyer des entêtes HTTP depuis le serveur :
header("Access-Control-Allow-Origin: mon-domaine.fr"),