Cookie аутентификации не отправляются при запросе Axios в браузере [дубликат]

У меня проблемы с аутентификацией на основе cookie в моем приложении Django + React. Я установил cookie на бэкенде, но он не отправляется при последующих запросах от фронтенда React (использующего Vite) приложения, работающего на Google Chrome.

Я пытаюсь реализовать аутентификацию с помощью cookies в бэкенде Django с помощью Simple JWT. После успешного входа в систему я устанавливаю cookie аутентификации («CAT») в Django. Вот код, который я использую для установки cookie:

final_response.set_cookie(
    "CAT",
    combined_token,
    httponly=True,
    secure=False,
    samesite="None",
    max_age=86400,
    path="/",
)
return final_response

Setting.py на сервере Django:

CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOWED_ORIGINS = ["http://localhost:5173/"]
CORS_ALLOW_CREDENTIALS = True
SECURE_CROSS_ORIGIN_OPENER_POLICY = "same-origin"

Я вижу cookie, сохраненные в Chrome после входа в систему: enter image description here

Однако когда мое приложение React делает последующие запросы, браузер, похоже, не включает cookie, и я получаю ошибку аутентификации («Cookie не найдено»). Вот моя настройка запросов Axios в приложении React: 

try {
  const auth_response = await axios.get(
    "http://my-django-server/api/auth/auth-checker",
    {
      headers: {
        "Content-Type": "application/json",
      },
      withCredentials: true,
      timeout: 5000,
    }
  );
  console.log(auth_response?.data);
  if (auth_response?.status === 200) {
    navigate("/profile");
  } else {
    console.error("Unauthorized access. Please try again.");
  }
} catch (error) {
  console.error("An error occurred. Please try again.", error);
}

Ручная аутентификация работает: Интересно, что когда я вручную устанавливаю cookie в запросе Axios с терминала, запрос работает, как и ожидалось, и я получаю аутентифицированный ответ. Однако в браузере это не удается.

getRegularHeader(port: string): Record<string, string> {
    return {
      "Content-Type": "application/json",
      Origin: `http://localhost:${port}`,
    };
  }

const token = readlineSync.question("Enter CAT token: ");
        try {
          const response = await axios.get(url, {
            headers: { ...this.getRegularHeader(port), Cookie: `CAT=${token}` },
            withCredentials: true,
            timeout: 5000,
          });
          return response;
        } catch (error) {
          console.error(`Failed to authenticate: ${error}`);
          return null;
        }

Также есть сообщение от Google Chrome: enter image description here

Что я пробовал:

  • Проверили в Chrome и Edge с тем же результатом.
  • Убедитесь, что в запросе Axios установлено значение withCredentials: true.
  • Попробовал различные настройки cookie (например, SameSite=None, Secure=False).

Вопросы:

  • Почему браузеры не отправляют cookie вместе с моими запросами?
  • Есть ли какие-то специфические настройки или конфигурации, которые я могу упустить в Django или React?
Вернуться на верх