Cookies недоступны в react, но отображаются в инструментах разработчика chrome. Бэкэнд Django RF

У меня проблемы с получением токенов из cookies во фронтенде, хотя я могу видеть cookies, установленные в инструментах разработчика chrome с httpOnly, установленными на False. Я выполняю локальную разработку с:

• React frontend (http://localhost:3000/)
• Django backend (http://127.0.0.1:8000/)
• Chrome для веб-браузера, chrome developer для отладки.

В фреймворке для отдыха Django у меня

# views.py
@method_decorator(ensure_csrf_cookie, name="dispatch")
class SetCsrfTokenAPIView(APIView):
    permission_classes = (permissions.AllowAny,)

    def get(self, request, format=None):
        response = Response({"success": "CSRF cookie set"})
        response.set_cookie(
            "my_cookie", "cookie_value", max_age=3600, secure=True, samesite="None"
        )

        return response

# settings.py

CORS_ALLOW_ALL_ORIGINS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True


CSRF_COOKIE_SECURE = True
CSRF_COOKIE_SAMESITE = "None"
# CSRF_COOKIE_SAMESITE = "Lax"

CSRF_COOKIE_HTTPONLY = False

CORS_EXPOSE_HEADERS = ["Content-Type", "X-CSRFToken"]

SESSION_COOKIE_SAMESITE = None
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    # "*",
]
INSTALLED_APPS = [
...
    "rest_framework",
    "corsheaders",
]

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
...
]

Используя react frontend, я делаю fetch-запрос к конечной точке, которая попадает в SetCsrfTokenAPIView.

const data = await fetch(
          `${process.env.REACT_APP_API_URL}/auth/csrf/`,
          {
            method: "GET", 
            credentials: "include", // This is equivalent to Axios's `withCredentials: true`
            headers: {
              "Content-Type": "application/json", 
            },
          }
        );

Вызов прошел успешно, и я могу видеть значения токенов в инструментах разработчика chrome token в Applications header в Network

Однако, когда я использую js-cookie, react-cookie или document.cookie для получения содержимого cookie, react не может найти ни одного cookie из набора django. Если я напишу запись о куках вручную в chrome developer, то react сможет найти только написанные вручную куки. Ключи и значения (значение Secure, httpOnly и т.д.) совпадают с теми, что заданы из django

Как я могу получить доступ к cookies во фронтенде react? Моя цель - извлечь значение и отправить его с помощью заголовка X-CSRFToken.

Что я сделал до сих пор

Я перелопатил соответствующие форумы по django и stackoverflow. Во многих сообщениях говорится о том, что нужно сделать HttpOnly на False в настройках cookie в бэкенде, а во фронтенде установить credentials: "include", в запросах. Я также пробовал и fetch, и axios.

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