Einrichten von Domains, Subdomains und Umgang mit CORS in Nginx

Wenn Sie eine Website oder eine API betreiben, müssen Sie wahrscheinlich mit Domains, Subdomains und dem lästigen CORS-Problem umgehen. Lassen Sie uns das Schritt für Schritt aufschlüsseln und alles reibungslos einrichten.

Einrichten von Domains und Subdomains in Nginx

Nginx macht es super einfach, mehrere Domains und Subdomains zu konfigurieren. Sie müssen lediglich Server-Blöcke (auch bekannt als virtuelle Hosts) einrichten, um Nginx zu sagen, welche Domain wohin zeigen soll.

Verwendung von Nginx als Reverse Proxy

In diesem Fall verwenden wir Nginx als Reverse Proxy. Das bedeutet, dass Nginx eingehende Anfragen empfängt und sie basierend auf der Subdomain an die entsprechenden Backend-Server weiterleitet. Diese Konfiguration ist nützlich für Lastverteilung, Sicherheit und zentrale Anfragenbearbeitung.

HTTP auf HTTPS umleiten

Um sicherzustellen, dass der gesamte Datenverkehr sicher über HTTPS geleitet wird, richten Sie eine Umleitung von Port 80 auf 443 ein:

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

Umgang mit einer Domain und mehreren Subdomains mit dynamischem Proxy Pass

Wenn Sie sowohl die Hauptdomain (example.com) als auch mehrere Subdomains (api.example.com, blog.example.com usw.) dynamisch verwalten möchten, können Sie die Subdomain extrahieren und die Anfragen entsprechend weiterleiten:

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

Diese Konfiguration extrahiert dynamisch die Subdomain aus der Anfrage und leitet die Anfrage an einen entsprechenden Backend-Server (backend.<subdomain>.example.com) weiter. Außerdem wird sichergestellt, dass alle notwendigen Header ordnungsgemäß weitergeleitet werden.

Jetzt aktivieren Sie einfach die Konfiguration und starten Nginx neu:

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

Boom! Ihre Domain und alle Subdomains sollten jetzt mit HTTPS und dynamischem Proxying funktionieren.

Umgang mit CORS (Cross-Origin Resource Sharing) in Nginx

Was ist das Problem mit CORS?

CORS ist das, was Ihre Frontend-Anwendung daran hindert, eine API aufzurufen, die auf einer anderen Domain gehostet wird. Wenn Ihr Frontend unter app.example.com läuft und Ihre API unter api.example.com, müssen Sie Cross-Origin-Anfragen zulassen.

Aktivieren von CORS in Nginx

Um Ihrer API zu erlauben, Anfragen von einer anderen Domain zu akzeptieren, müssen Sie die richtigen Header in Nginx hinzufügen.

Alle Ursprünge zulassen (Nicht immer empfohlen)

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

Dies erlaubt jedem, auf Ihre API zuzugreifen, was für öffentliche APIs in Ordnung ist, aber riskant für private.

Nur eine bestimmte Domain zulassen

Möchten Sie den Zugriff auf app.example.com beschränken? Machen Sie stattdessen dies:

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

Umgang mit Preflight-Anfragen

Browser senden manchmal eine OPTIONS Anfrage, bevor sie einen tatsächlichen API-Aufruf machen. Wenn Sie dies nicht behandeln, wird es Probleme geben. So erlauben Sie Preflight-Anfragen:

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

Zusammenfassung

Die richtigen Einstellungen für Domains, Subdomains und CORS in Nginx zu finden, ist nicht so schwer, wenn man weiß, was man anpassen muss. Mit der richtigen Konfiguration können Sie Kopfschmerzen vermeiden und Ihre Apps reibungslos laufen lassen. Viel Spaß beim Programmieren!