Axios : comment résoudre l'erreur cors No 'Access-Control-Allow-Origin' header ?

Lorsque vous utilisez la librairie Axios sur votre front-end écrit avec le langage JavaScript, c'est pour accéder à une API. Cette API est la plupart du temps située sur un autre site. Vous avez donc déjà dû rencontrer le message d'erreur "No 'Access-Control-Allow-Origin' header is present on the requested resource." Il s'agit d'un message d'erreur lié à la sécurité.

Pour qu'un site internet ou une API accepte une connexion depuis un autre serveur, celui-ci doit émettre dans les réponses aux requêtes un entête particulier. Il s'agit de l'entête "Access-Control-Allow-Origin". Cet entête peut prendre en valeur un ou plusieurs domaines précis, ou bien le caractère '*' pour autoriser toutes les requêtes. C'est donc une modification qui doit être faite au niveau du serveur, cela ne sert à rien d'ajouter l'entête dans votre requête avec Axios. En attendant de pouvoir préparer votre serveur, il existe une solution temporaire pour vous permettre de développer ces requêtes : le reverse proxy. Un serveur reverse-proxy filtre les requêtes émises vers un serveur web. Cela permet notamment de le protéger, mais aussi de gérer le cas de plusieurs serveurs situés dans la même installation. Vous pouvez utiliser la plateforme Docker pour créer un container avec un serveur reverse-proxy dedans. Ce serveur va ainsi faire croire à l'API qu'elle est sur le même nom de domaine que votre site utilisant Axios. Vous n'aurez plus de message d'erreur lié aux CORS, et ce sans devoir modifier la configuration de votre serveur. Le container va pour cela utiliser un serveur NGINX. Voici la configuration pour créer ce système, selon votre système d'exploitation :

# Linux
events {
    worker_connections 1024;
}

http {
    server {
        listen 80;

        location /api {
            proxy_pass http://127.0.0.1:8080/api/;
        }

        location / {
            proxy_pass http://127.0.0.1:3000/;

            # The following is for the websocket connection of the webpack dev server (https://gist.github.com/simongfxu/ea128160c296f31e41e6)
            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
    }
}

# Mac
events {
    worker_connections 1024;
}

http {
    server {
        listen 80;

        location /api {
            proxy_pass http://hostname:8080/api/;
        }

        location / {
            proxy_pass http://hostname:3000/;

            # The following is for the websocket connection of the webpack dev server (https://gist.github.com/simongfxu/ea128160c296f31e41e6)
            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
    }
}

Il y a ensuite un script à utiliser qui va lancer votre container avec la bonne configuration. Lancez votre front-end, votre back-end, puis utilisez le script pour lancer le serveur reverse-proxy. Vous pourrez ensuite continuer votre développement sans erreur de type CORS.

# Linux
#!/usr/bin/env bash
docker run --rm --name dev-nginx -p 80:80 --net="host" -v $PWD/nginx.conf:/etc/nginx/nginx.conf:ro  nginx:1.11.8-alpine

# Mac
#!/usr/bin/env bash
docker run --rm --name dev-nginx -p 80:80 -v $PWD/nginx.conf:/etc/nginx/nginx.conf:ro  nginx:1.11.8-alpine

JavaScript