Аутентификация в серверной части django из интерфейса для видео на другом поддомене, размещенном на автономном экземпляре coolify

Здравствуйте, я пытаюсь развернуть два приложения в автономном экземпляре Coolify и не могу пройти аутентификацию из своего интерфейса. Они находятся на разных поддоменах, как вы можете видеть из приведенного ниже примера:

(Также следует упомянуть, что я использую caddy в качестве обратного прокси-сервера в Coolify)

Когда я пытаюсь войти в систему с интерфейса, я получаю следующую ошибку:

Запрос из разных источников заблокирован: Политика того же источника запрещает чтение удаленного ресурса по адресу https://api.mydomain.mydomain.com/api/api-token-auth/. (Причина: заголовок "access-control-allow-origin" не разрешен в соответствии с заголовком "Access-Control-Allow-Headers" из предполетного ответа CORS)

Я уже несколько дней читаю о CORS и до сих пор не могу в этом разобраться. Я настроил свой сервер django со следующими настройками

  1. установленный django-cors-headers

  2. внес эти изменения в свой settings.py

INSTALLED_APPS = [
    # in project
    'budget',

    # installed Packages

    'rest_framework',
    'rest_framework.authtoken',
    "crispy_forms",
    "crispy_bootstrap5",

    "corsheaders",
    #
    # ---------------
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',

    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',

    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ALLOW_METHODS = (
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
)

CORS_ALLOWED_ORIGINS = [
    'https://project.mydomain.com',
]
# CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

Во внешнем интерфейсе, когда я отправляю запрос:

const axiosInstance = axios.create({
  baseURL: apiUrl,
  headers: initialHeaders,
  withCredentials: true, // This is important for sending cookies
});

const response = await axiosInstance.post<AuthResponse>('/api-token-auth/', {
      username,
      password,
    },
  {
    withCredentials: true,
    headers: {
      'Access-Control-Allow-Origin': '*', 
      'Content-Type': 'application/json'
    },
  });

В идеале, я бы хотел, чтобы эти два сервиса находились под одним и тем же поддоменом в Coolify, но я не силен в обратных прокси.

Если кто-нибудь сможет указать мне правильное направление, это было бы очень полезно. Спасибо!

Вам необходимо явно добавить разрешенные источники в свои настройки после активации cors-headers. Добавьте это в settings.py :

CORS_ALLOWED_ORIGINS = ["https://project.mydomain.com"] # This is your frontend's url

Это позволит вашему интерфейсу получить ответ.

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