Аутентификация в серверной части django из интерфейса для видео на другом поддомене, размещенном на автономном экземпляре coolify
Здравствуйте, я пытаюсь развернуть два приложения в автономном экземпляре Coolify и не могу пройти аутентификацию из своего интерфейса. Они находятся на разных поддоменах, как вы можете видеть из приведенного ниже примера:
- Интерфейс голосования (формат): https://project.mydomain.com/#/login
- Серверная часть Django (формат): https://api.mydomain.mydomain.com/
(Также следует упомянуть, что я использую caddy в качестве обратного прокси-сервера в Coolify)
Когда я пытаюсь войти в систему с интерфейса, я получаю следующую ошибку:
Запрос из разных источников заблокирован: Политика того же источника запрещает чтение удаленного ресурса по адресу https://api.mydomain.mydomain.com/api/api-token-auth/. (Причина: заголовок "access-control-allow-origin" не разрешен в соответствии с заголовком "Access-Control-Allow-Headers" из предполетного ответа CORS)
Я уже несколько дней читаю о CORS и до сих пор не могу в этом разобраться. Я настроил свой сервер django со следующими настройками
установленный
django-cors-headers
внес эти изменения в свой
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
Это позволит вашему интерфейсу получить ответ.