React向Django发送PUT请求时因CSRF令牌长度错误触发403禁止访问的问题求助

我现在正尝试从React前端向Django后端发送PUT请求，用来更新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，查看Django的服务器日志，发现是CSRF相关的403错误：

Forbidden (CSRF token from the 'X-Csrftoken' HTTP header has incorrect length.): /api/project/1/status
WARNING:django.security.csrf:Forbidden (CSRF token from the 'X-Csrftoken' HTTP header has incorrect length.): /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

备注：内容来源于stack exchange，提问作者user23450334