Если вы запускаете веб-сайт или API, скорее всего, вам придется иметь дело с доменами, поддоменами и этой надоедливой проблемой CORS. Давайте разберем все шаг за шагом и настроим все гладко.

Настройка доменов и поддоменов в Nginx

Nginx делает настройку нескольких доменов и поддоменов очень простой. Вам просто нужно настроить серверные блоки (также известные как виртуальные хосты), чтобы указать Nginx, какой домен должен указывать куда.

В этом случае мы используем Nginx в качестве обратного прокси. Это означает, что Nginx будет получать входящие запросы и пересылать их на соответствующие серверы на основе поддомена. Эта настройка полезна для балансировки нагрузки, безопасности и централизованного управления запросами.

Чтобы обеспечить безопасную маршрутизацию всего трафика через HTTPS, настройте редирект с порта 80 на 443:

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

Если вы хотите обрабатывать как основной домен (example.com), так и несколько поддоменов (api.example.com, blog.example.com и т.д.) динамически, вы можете извлечь поддомен и проксировать запросы соответствующим образом:

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

Эта конфигурация динамически извлекает поддомен из запроса и проксирует запрос на соответствующий сервер бэкенда (backend.<subdomain>.example.com). Кроме того, она обеспечивает правильную передачу всех необходимых заголовков.

Теперь просто включите конфигурацию и перезапустите Nginx:

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

Готово! Ваш домен и все поддомены теперь должны работать с HTTPS и динамической прокси-передачей.

Работа с CORS (Кросс-доменные запросы) в Nginx

CORS — это то, что блокирует ваш фронтенд от вызова API, размещенного на другом домене. Если ваш фронтенд находится на app.example.com и ваш API на api.example.com, вам нужно разрешить кросс-доменные запросы.

Чтобы ваш API принимал запросы с другого домена, вам нужно добавить правильные заголовки в Nginx.

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

Это позволяет любому получить доступ к вашему API, что нормально для публичных API, но рискованно для частных.

Хотите ограничить доступ к app.example.com? Сделайте это вместо этого:

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

Браузеры иногда отправляют запрос OPTIONS перед тем, как сделать фактический вызов API. Если вы не обработаете его, все сломается. Вот как разрешить предварительные запросы:

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

Заключение

Правильная настройка доменов, поддоменов и CORS в Nginx не так уж сложна, как только вы знаете, что нужно подправить. С правильной настройкой вы сможете избежать головной боли и поддерживать ваши приложения в рабочем состоянии. Удачного кодирования!