React使用fetch向Django DRF发送POST请求时出现400错误

核心问题：请求数据格式错误 #

你的Create.jsx中fetch请求的写法不符合HTTP POST规范：

• 直接将title和body作为fetch配置对象的属性传递，而非放在请求体body字段中
• 未将请求数据统一包装成JSON对象后序列化

修复后的Create.jsx代码 #

import React, { useState} from 'react'
import { useNavigate } from 'react-router-dom'

const Create = () => {
    const history = useNavigate()
    const [title, setTitle] = useState("")
    const [body, setBody] = useState("")

    const createProject = async () => {
        try {
            const response = await fetch('http://localhost:8000/api/project/create/', {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json',
                    // 若DRF启用Session认证，需添加CSRF令牌，示例：
                    // 'X-CSRFToken': document.cookie.split('; ').find(row => row.startsWith('csrftoken=')).split('=')[1]
                },
                // 关键修复：将请求数据包装后放入body字段
                body: JSON.stringify({
                    title,
                    body
                })
            })
            
            if (response.ok) {
                history('/projects')
            } else {
                // 打印错误详情辅助排查
                const errorData = await response.json()
                console.error('请求错误:', errorData)
            }
        } catch (err) {
            console.error('网络错误:', err)
        }
    }

    return (
        <div className="create-project">
            <p>
                <input type="text" onChange={e => setTitle(e.target.value)} value={title} placeholder="标题"></input> 
                <textarea onChange={e => setBody(e.target.value)} value={body} placeholder="内容"></textarea>
                <button onClick={createProject}>Submit</button>
            </p>
        </div>
    )
}

export default Create

额外排查要点 #

• 序列化器字段匹配：确认ProjectSerializer中定义了title和body字段，且与请求字段名完全一致
• 跨域配置：若React运行在非8000端口（如3000），需在Django中安装并配置django-cors-headers解决跨域问题
• 认证权限：若CreateProject视图要求认证，需在请求头中携带对应认证信息（如Token）

内容的提问来源于stack exchange，提问作者Amine Khiari