Impostare Domini, Sottodomini e Gestire CORS in Nginx

Se stai gestendo un sito web o un'API, è probabile che tu debba affrontare domini, sottodomini e quel fastidioso problema di CORS. Analizziamo tutto passo dopo passo e mettiamo tutto in ordine.

Impostare Domini e Sottodomini in Nginx

Nginx rende super facile configurare più domini e sottodomini. Devi solo impostare i server block (alias virtual hosts) per dire a Nginx quale dominio deve puntare dove.

Utilizzare Nginx come Reverse Proxy

In questo caso, stiamo utilizzando Nginx come reverse proxy. Questo significa che Nginx riceverà le richieste in arrivo e le inoltrerà ai server backend appropriati in base al sottodominio. Questa configurazione è utile per il bilanciamento del carico, la sicurezza e la centralizzazione della gestione delle richieste.

Reindirizzare HTTP a HTTPS

Per garantire che tutto il traffico venga instradato in modo sicuro tramite HTTPS, imposta un reindirizzamento dalla porta 80 alla 443:

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

Gestire un Dominio e Più Sottodomini con Proxy Pass Dinamico

Se vuoi gestire sia il dominio principale (example.com) che più sottodomini (api.example.com, blog.example.com, ecc.) in modo dinamico, puoi estrarre il sottodominio e inoltrare le richieste di conseguenza:

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;
    }
}

Questa configurazione estrae dinamicamente il sottodominio dalla richiesta e inoltra la richiesta a un server backend corrispondente (backend.<subdomain>.example.com). Inoltre, assicura che tutti gli header necessari vengano inoltrati correttamente.

Ora, abilita semplicemente la configurazione e riavvia Nginx:

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

Boom! Il tuo dominio e tutti i sottodomini dovrebbero ora funzionare con HTTPS e proxy dinamico.

Gestire CORS (Cross-Origin Resource Sharing) in Nginx

Qual è il Problema con CORS?

CORS è quella cosa che blocca il tuo frontend dal chiamare un'API ospitata su un altro dominio. Se il tuo frontend si trova su app.example.com e la tua API è su api.example.com, dovrai consentire le richieste cross-origin.

Abilitare CORS in Nginx

Per consentire alla tua API di accettare richieste da un altro dominio, devi aggiungere gli header giusti in Nginx.

Consentire Tutti gli Origini (Non Sempre Raccomandato)

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;
        }
    }
}

Questo consente a chiunque di accedere alla tua API, il che va bene per le API pubbliche ma è rischioso per quelle private.

Consentire Solo a un Dominio Specifico

Vuoi limitare l'accesso a app.example.com? Fai così invece:

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

Gestire le Richieste Preflight

I browser a volte inviano una richiesta OPTIONS prima di effettuare una chiamata API effettiva. Se non la gestisci, le cose si romperanno. Ecco come consentire le richieste preflight:

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;
    }
}

Conclusione

Gestire domini, sottodomini e CORS in Nginx non è poi così difficile una volta che sai cosa modificare. Con la giusta configurazione, puoi evitare mal di testa e mantenere le tue app in funzione senza intoppi. Buon coding!