Как получить доступ к токену из заголовков django/react

В моем бэкенде я использую set_cookie для установки токена доступа, к которому мне нужно получить доступ в моем фронтенде, но я не могу этого сделать.

Мой бэкэнд, использующий django:

# Authentication successful
            access_token = AccessToken.for_user(user)
            refresh_token = RefreshToken.for_user(user)

            response = JsonResponse({'message': 'Login successful', 'tire_stock': tire_stock_data})

            # Set HTTP-only flag for both access and refresh tokens
            response.set_cookie('access_token', str(access_token), secure=True)
            response.set_cookie('refresh_token', str(refresh_token), httponly=True, secure=True)

            return response

Мой фронтенд, использующий react:

const response = await axios.post(
        `${import.meta.env.VITE_URL}auth/login/`,
        { username: username, password: password },
        {
          headers: { "Content-Type": "application/json" },
          withCredentials: true,
        }
      );

Заголовок ответа: enter image description here

Я попробовал response.headers['access_token'], который вернул undefined. Я также пробовал document.cookie, но это не помогло. Я прочитал в Интернете, что мне нужно раскрыть заголовок, чтобы получить к нему доступ? Не уверен, как это сделать в Django. ChatGPT сказал, что мне не нужно раскрывать заголовок. Я думал о передаче токена в body, что решило бы проблему, но это не является промышленным стандартом, так как токены обычно должны быть в заголовках. Поэтому я не уверен, как поступить? Я показал проблему SameSite на случай, если она имеет отношение к делу, но я не думаю, так как при переходе в Chrome devtools application/cookies я вижу там токены, так что они устанавливаются нормально? Может ли SameSite вызвать эту проблему?

Если я правильно понимаю проблему, вы не можете получить доступ к токену из JS.

Чтобы разрешить его, нужно добавить настройку в settings.py:

SESSION_COOKIE_HTTPONLY = False

больше здесь: https://docs.djangoproject.com/en/5.0/ref/settings/#csrf-cookie-httponly

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