Декоратор метода ensure_csrf_cookie не устанавливает CSRF-токен на вкладке cookies браузера

Я работаю над проектом, используя Django в качестве бэкенда API (размещен на localhost:8000) и React (размещен на localhost:3000) в качестве фронтенда. Я планирую разместить их на разных серверах и в продакшене. В настоящее время я пытаюсь установить CSRF-токен на вкладке cookies браузера, используя декоратор метода "ensure_csrf_cookie". Хотя вызов API javascript, похоже, работает и возвращает ответ, в моей вкладке cookie не устанавливается куки (проверено в разных браузерах). Однако странно то, что когда я ввожу URL-адрес CSRF-токена непосредственно в браузере, куки устанавливаются. Это наводит меня на мысль, что он не работает из-за некоторых проблем с кросс-оригинальностью. Поэтому я безуспешно пробовал множество различных настроек в файле settings.py.

Django View:

@method_decorator(ensure_csrf_cookie, name='dispatch')
class GetCSRFToken(APIView):
    permission_classes = (permissions.AllowAny, )

    def get(self, request, format=None):
        return Response ({ "success": "CSRF cookie set"})

Реакция:

function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== "") {
    const cookies = document.cookie.split(";");
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === name + "=") {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

async function fetchCsrfToken() {
  try {
    const res = await fetch(`http://127.0.0.1:8000/accounts/csrf_cookie`, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    });
    if (!res.ok) {
      console.log("Problem");
    } else {
      const context = await res.json();
      console.log(context);
    }
  } catch (e) {
    // showMessage("Error: Unexpected error has occurred!", "Error");
  }
}

const CSRFToken = () => {
  const [csrftoken, setcsrftoken] = useState("");
  useEffect(() => {
    console.log("useEffect");
    fetchCsrfToken();
    setcsrftoken(getCookie("csrftoken"));
  }, []);
  return (
    <>
      <input
        className="csrfmiddlewaretoken"
        type="hidden"
        name="csrfmiddlewaretoken"
        value={csrftoken}
      />
    </>
  );
};

Настройки Django:

from pathlib import Path
import os

BASE_DIR = Path(__file__).resolve().parent.parent
DEBUG = True
ALLOWED_HOSTS = []
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads/')
MEDIA_URL = '/uploads/'
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'groups',
    'registration',
    'accounts',
    'channels',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
]

AUTH_USER_MODEL = 'accounts.User'

ACCOUNT_FORMS = {'signup': 'registration.forms.CustomSignUpForm'}

LOGIN_URL = '/registration/login/'

LOGIN_REDIRECT_URL = '/'


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',
]


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'build')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

REST_FRAMEWORK = {
    "DEFAULT_PERMISSION_CLASSES": [
        "rest_framework.permissions.IsAuthenticated"
    ],
    "DEFAULT_AUTHENTICATION_CLASSES": [
        "rest_framework.authentication.SessionAuthentication",
    ]
}

CSRF_TRUSTED_ORIGINS = ['https://*.127.0.0.1', 'http://localhost:3000']
CORS_ORIGIN_WHITELIST = ['https://*.127.0.0.1', 'http://localhost:3000']
CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]
CORS_ORIGIN_ALLOW_ALL=True
CORS_ALLOW_CREDENTIALS = False

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": [("localhost", 6379)],
        },
    },
}

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