Почему я получаю ошибку (CSRF-токен из HTTP-заголовка 'X-Csrftoken' имеет неправильную длину.)?

Я пытаюсь отправить из React PUT-запрос на сервер Django для обновления поля модели Django. Вот код

const handleStatusChange = async (projectId, newStatus) => {
        try {
            const response = await fetch(`/api/project/${projectId}/status`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                body: JSON.stringify({ status: newStatus })
            });

            if (response.ok) {
                setProjects(prevProjects => 
                    prevProjects.map(project => 
                        project.id === projectId ? { ...project, status: newStatus } : project
                    )
                );
                setStatusDropdown(null); 
                setUpdatingProjectId(null); 
            } else {
                console.error('Failed to update project status');
            }
        } catch (error) {
            console.error('Error updating project status:', error);
        }
    };

Проблема в том, что в консоли появляется сообщение 'Failed to update project status' из-за ошибки сервера: Forbidden (CSRF-токен из HTTP-заголовка 'X-Csrftoken' имеет неправильную длину.): /api/project/1/status WARNING:django.security.csrf:Forbidden (CSRF-токен из HTTP-заголовка 'X-Csrftoken' имеет неправильную длину.): /api/project/1/status [06/Dec/2024 17:37:21] «PUT /api/project/1/status HTTP/1.1» 403 2549. Я понятия не имею, что приводит к ошибке. Я применил ту же логику к другому PUT-запросу на другой странице, и у меня не было этой проблемы. Может кто-нибудь объяснить, как я могу управлять длиной токена csrf? Я не генерирую такой токен «вручную»

Я поделюсь полной консольной ошибкой, если это поможет:

index.js:25 Failed to update project status
handleStatusChange  @   index.js:25
await in handleStatusChange     
onClick @   index.js:61
callCallback    @   react-dom.development.js:3942
invokeGuardedCallbackDev    @   react-dom.development.js:3991
invokeGuardedCallback   @   react-dom.development.js:4053
invokeGuardedCallbackAndCatchFirstError @   react-dom.development.js:4067
executeDispatch @   react-dom.development.js:8273
processDispatchQueueItemsInOrder    @   react-dom.development.js:8305
processDispatchQueue    @   react-dom.development.js:8318
dispatchEventsForPlugins    @   react-dom.development.js:8329
(anónimo)   @   react-dom.development.js:8538
batchedEventUpdates$1   @   react-dom.development.js:22426
batchedEventUpdates @   react-dom.development.js:3742
dispatchEventForPluginEventSystem   @   react-dom.development.js:8537
attemptToDispatchEvent  @   react-dom.development.js:6035
dispatchEvent   @   react-dom.development.js:5954
unstable_runWithPriority    @   react.development.js:2764
runWithPriority$1   @   react-dom.development.js:11306
discreteUpdates$1   @   react-dom.development.js:22443
discreteUpdates @   react-dom.development.js:3753
dispatchDiscreteEvent   @   react-dom.development.js:5919

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