Запрещено (CSRF-куки не установлены.) Django, Next.js

Я пытаюсь отправить данные на сервер Django, чтобы обновить профиль пользователя из приложения Next.js;

У меня есть подобная настройка для других маршрутов, и они работают нормально, но здесь я получаю следующую ошибку:

Запрещено (CSRF cookie не установлен.): /users/api/update-profile/ [15/Dec/2024 20:53:02] «POST /users/api/update-profile/ HTTP/1.1» 403 2855

#settings.py

CSRF_COOKIE_HTTPONLY = False  # Allow JavaScript to read the CSRF cookie
#CSRF_USE_SESSIONS = False
CSRF_COOKIE_SAMESITE = 'Lax'
CSRF_COOKIE_SECURE = False
# Ensure these are set correctly
SESSION_COOKIE_SAMESITE = 'Lax'  # or 'None' for cross-site
CSRF_COOKIE_SAMESITE = 'Lax'     # or 'None' for cross-site

MIDDLEWARE = [
    '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',
]
CORS_ALLOW_CREDENTIALS = True
#CORS_ALLOW_ALL_ORIGINS = True

CORS_ALLOWED_ORIGINS = [
    #"http://localhost",  
    #"http://127.0.0.1", 
    "http://localhost:3000" 
]

CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

#views.py

#updateprofile/route.ts

import { LogInCredentials } from "@/interfaces/user";
import { API_URL } from "@/lib/constants";
import { extractCsrfToken, extractSessionId } from "@/lib/sessionidextractor";
import { NextApiRequest, NextApiResponse } from "next";
import { cookies } from 'next/headers'
import { NextRequest } from "next/server";


export async function POST( req: NextApiRequest, res: NextApiResponse) {
    console.log('i am reaching here')
    const Cookies = await cookies()

    const csrfToken = Cookies.getAll('csrftoken')
    const sessionid = Cookies.getAll('sessionid')

    console.log('CSRF Token:', csrfToken)
    console.log('sessionid:', sessionid)


    const profileUpdateResponse = await fetch(`${API_URL}/update-profile/`, {
        method: 'POST',
        headers:{
            'Content-Type': 'application/json',
            'X-CSRFToken': `${csrfToken[0].value}`,
            'Cookie': `${sessionid[0].value}`
        },
        body: JSON.stringify(req.body)
      });

    
    const responseText = await profileUpdateResponse.text()
    //console.log(responseText)

    if(profileUpdateResponse.status == 403){
       
        return Response.json({}, {status: 400})
    }

    if(profileUpdateResponse.status == 401){
        console.log('400000000',profileUpdateResponse.status)
        return Response.json({}, {status: 400})
    }
    if(profileUpdateResponse.status == 200 || profileUpdateResponse.status == 302){

        return Response.json({}, {status: 200})
    }
    return Response.json({'response': true},{status: 200})
 
    
}

Обработка куки: Способ, которым я задавал заголовок Cookie, был неправильным. Обычно вы хотите установить его как полную строку cookie:

   const profileUpdateResponse = await fetch(`${API_URL}/update-profile/${requestBody.user_id}/`, {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken.value,
        'Cookie': `csrftoken=${csrfToken.value}; sessionid=${sessionid.value}`
      },
  body: JSON.stringify(requestBody)
});
Вернуться на верх