Nginx + React + Django: Понимание заголовков CORS-запросов

Я размещаю React фронтенд-приложение и Django бэкенд API на Nginx в одном локальном Raspberry Pi, на портах 80 и 8000, соответственно, со следующим конфигом:

// REACT APP
server {
        listen 80;
        listen [::]:80;

        root /link-to/build;
        index index.html;

        server_name pinode;

        location / {
                try_files $uri /index.html;
        }
}

// Django APP/Gunicorn
server {
    listen 8000;
    server_name localhost;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /link-to/myproject;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}

Для моего случая использования я бы хотел, чтобы все внутренние запросы между react и django использовали localhost. Однако пользователь может получить доступ к фронт-энду react, используя имя хоста Raspberry Pi (в данном случае http://pinode/, как показано в конфигурации nginx выше).

В react все вызовы API используют http://localhost:8000/api/*.

Во время тестирования вышеупомянутых действий я добился определенного успеха. Однако одно из следующих действий всегда заканчивается неудачей:

  1. Во время входа в систему я получаю ответ от http://localhost:8000/api/login/, но Set-Cookie не работает из-за межсайтовой политики.

  2. Попытка добавить заголовки в конфиг бэкенда nginx приводит к тому, что запросы отклоняются из-за политики CORS.

  3. Почтовые запросы отклоняются из-за отсутствия csrftoken, несмотря на то, что axios настроен с заголовком X-CSRFToken и протестирован в среде разработки.

Мне не удалось найти исчерпывающего руководства, демонстрирующего, какая конфигурация идеально подходит для settings.py, axios и nginx, чтобы все работало. Буду признателен за помощь.

Вы можете попробовать использовать библиотеку django-cors-headers. Вот базовая конфигурация, которая может быть вам полезна:

CORS_ALLOWED_ORIGINS = [
    "http://localhost",
    "http://pinode"
]

Эта конфигурация позволяет адресам "http://localhost" и "http://pinode" получить доступ к вашему Django-приложению. django-cors-headers - очень полезная библиотека, когда вы имеете дело с Cross Origin Resource Sharing (CORS) в проекте Django.

Однако важно не забыть добавить corsheaders к вашим INSTALLED_APPS и MIDDLEWARE в настройках Django, как показано ниже:

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

Важно отметить, что CORS (Cross-Origin Resource Sharing) всегда связан с происхождением запросов. В данном случае вам всегда нужно разрешить CORS для вашего приложения React, которое является источником ваших запросов. Это означает, что сервер, на котором запущено ваше приложение Django, должен включить URL вашего приложения React в список CORS_ALLOWED_ORIGINS, что позволит приложению React делать кросс-оригинальные запросы к вашему серверу Django.

Надеюсь, это поможет вам! Если у вас есть еще вопросы, не стесняйтесь спрашивать.

Вернуться на верх