Запрещено (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)
});