Si vous gérez un site web ou une API, il y a de fortes chances que vous deviez vous occuper des domaines, des sous-domaines et de ce problème de CORS toujours ennuyeux. Décomposons cela étape par étape et configurons tout en douceur.

Configuration des domaines et sous-domaines dans Nginx

Nginx facilite énormément la configuration de plusieurs domaines et sous-domaines. Il vous suffit de configurer des blocs de serveur (aussi appelés hôtes virtuels) pour indiquer à Nginx quel domaine doit pointer où.

Utiliser Nginx comme un proxy inverse

Dans ce cas, nous utilisons Nginx comme un proxy inverse. Cela signifie qu'Nginx recevra les requêtes entrantes et les transmettra aux serveurs backend appropriés en fonction du sous-domaine. Cette configuration est utile pour l'équilibrage de charge, la sécurité et la centralisation du traitement des requêtes.

Rediriger HTTP vers HTTPS

Pour garantir que tout le trafic est acheminé de manière sécurisée via HTTPS, configurez une redirection du port 80 vers le port 443 :

server {
    listen 80;
    server_name example.com *.example.com;
    return 301 https://$host$request_uri;
}

Gestion d'un domaine et de plusieurs sous-domaines avec un proxy pass dynamique

Si vous souhaitez gérer à la fois le domaine principal (example.com) et plusieurs sous-domaines (api.example.com, blog.example.com, etc.) de manière dynamique, vous pouvez extraire le sous-domaine et proxy les requêtes en conséquence :

server {
    listen 443 ssl;
    server_name *.example.com;

    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;

    set $subdomain "default";
    if ($host ~* ^(.+?)\.example\.com$) {
        set $subdomain $1;
    }

    location / {
        proxy_pass http://backend.$subdomain.example.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Connection "upgrade";
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Authorization $http_authorization;
    }
}

Cette configuration extrait dynamiquement le sous-domaine de la requête et proxy la requête vers un serveur backend correspondant (backend.<subdomain>.example.com). De plus, elle garantit que tous les en-têtes nécessaires sont correctement transmis.

Maintenant, il suffit d'activer la configuration et de redémarrer Nginx :

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Boom ! Votre domaine et tous les sous-domaines devraient maintenant fonctionner avec HTTPS et un proxy dynamique.

Gestion de CORS (Cross-Origin Resource Sharing) dans Nginx

Quel est le problème avec CORS ?

CORS est ce qui empêche votre frontend d'appeler une API hébergée sur un autre domaine. Si votre frontend se trouve sur app.example.com et que votre API est sur api.example.com, vous devrez autoriser les requêtes cross-origin.

Activer CORS dans Nginx

Pour permettre à votre API d'accepter des requêtes d'un autre domaine, vous devez ajouter les bons en-têtes dans Nginx.

Autoriser tous les origines (pas toujours recommandé) 

server {
    listen 443 ssl;
    server_name api.example.com;

    ssl_certificate /etc/nginx/ssl/api.example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/api.example.com.key;

    location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';

        if ($request_method = OPTIONS) {
            return 204;
        }
    }
}

Cela permet à quiconque d'accéder à votre API, ce qui est acceptable pour les APIs publiques mais risqué pour les privées.

Autoriser uniquement un domaine spécifique

Vous voulez limiter l'accès à app.example.com? Faites ceci à la place :

add_header 'Access-Control-Allow-Origin' 'https://app.example.com';

Gestion des requêtes préalables

Les navigateurs envoient parfois une requête OPTIONS avant de faire un appel API réel. Si vous ne le gérez pas, cela risque de poser problème. Voici comment autoriser les requêtes préalables :

location / {
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
        return 204;
    }
}

Conclusion

Bien configurer les domaines, sous-domaines et CORS dans Nginx n'est pas si compliqué une fois que vous savez quoi ajuster. Avec la bonne configuration, vous pouvez éviter les maux de tête et garder vos applications fonctionnant sans accroc. Bon codage !