CORS не активирует мой POST-запрос. CSRF Cookie 'не установлен'

Я пытаюсь повторить этот проект , используя Vue вместо React.

Моя цель - аутентифицировать пользователя Django из моего фронтенда Vue.

Я использую пакет django-cors-headers со следующими настройками.

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    ...,
    'django.contrib.messages.middleware.MessageMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]
CORS_ALLOWED_ORIGINS = [
    "http://localhost:8080",
    "http://127.0.0.1:9000"
]

CSRF_TRUSTED_ORIGINS = [
    "http://localhost:8080",
    "http://127.0.0.1:9000"
]

CORS_ALLOW_HEADERS = [
    ...
    'x-csrftoken',
    'csrfmiddlewaretoken',
    'credentials'
]

CORS_ALLOW_CREDENTIALS = True
CSRF_COOKIE_SECURE = False
SESSION_COOKIE_SECURE = False

Прямо сейчас, начальный запрос для получения CSRF cookie работает и, кажется, возвращает правильный CSRF токен, который я могу включить в свой запрос:

const login = async () => {
  const cookie = getCookie("csrftoken");
  console.log(cookie)
  const data = new FormData();
  data.append("username", username);
  data.append("password", password);
  const headers = new Headers()
  headers.append('X-CSRFToken', cookie)

  const response = await fetch("http://localhost:8000/auth/", {
    method: "POST",
    // cookies: {
    //   "X-CSRFToken": cookie ? cookie : ""
    // },
    headers: headers,
    credentials: "same-origin",
    body: data,
  });
  return response.ok;
};

Однако в процессе CORS все равно происходит сбой, поскольку запрос так и не доходит до представления:

[21/May/2022 14:26:18] "OPTIONS /auth/ HTTP/1.1" 200 0
Forbidden (CSRF cookie not set.): /auth/
[21/May/2022 14:26:18] "POST /auth/ HTTP/1.1" 403 2870

views.py

@method_decorator(ensure_csrf_cookie, 'dispatch')
class UserView(View):

    # This is the validation check
    def get(self, request):
        print(request)
        if not request.user.is_authenticated:
          return http.HttpResponseForbidden()
        return http.JsonResponse({
          "id": request.user.pk,
          "username": request.user.get_username(),
        })

    # This is the login
    def post(self, request):
        print('smoke')
        print(request.headers.items())
        form = AuthenticationForm(request, request.POST)        
        if form.is_valid():
            login(request, form.get_user())
            return self.get(request)
        return http.JsonResponse(form.data, status=403)

Другие структуры запросов, которые я пробовал, включают:

method: "POST",
cookies: {
  "X-CSRFToken": cookie ? cookie : ""
},
credentials: "same-origin",
body: data,

и включение маркера csrf непосредственно в данные:

data.append('csrfmiddlewaretoken', cookie)

Я все еще изучаю все это, и я не уверен, как устранить неполадки. Я также не уверен, что означает, что cookie "не установлен". Что я упускаю?

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