React调用Django后端接口出现400 Bad Request错误求助

以下是针对你遇到问题的具体排查和解决步骤：

1. 缺失CSRF令牌验证 #

Django默认启用CSRF保护机制，Postman测试时可能未触发该验证，但浏览器发起的POST请求必须携带CSRF令牌才能通过验证。

解决方案：
从Django设置的Cookie中获取csrftoken，并添加到请求头：

// 新增获取CSRF令牌的工具函数
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// 修改请求配置
const requestOptions = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCookie('csrftoken') // 添加CSRF令牌头
    },
    body: JSON.stringify({id: 1, text: 'some text'})
}

2. 跨域资源共享(CORS)未配置 #

浏览器会限制跨域请求，Postman不受此限制。如果React运行在localhost:3000，Django运行在localhost:8000，需要配置Django允许跨域。

解决方案：

• 安装依赖：pip install django-cors-headers
• 在settings.py中添加配置：

INSTALLED_APPS = [
    # ...其他应用
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ...其他中间件
]

# 允许React本地服务器跨域
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

3. 请求数据字段与后端期望不匹配 #

检查Django后端的序列化器或视图接收的字段名称是否和你发送的一致。例如如果后端期望user_id而非id，需要调整请求体：

body: JSON.stringify({user_id: 1, text: 'some text'})

4. 过早刷新页面中断请求 #

你的代码在发起fetch后立即执行window.location.reload()，会直接中断请求，无法获取完整的错误信息。

解决方案：
先移除刷新代码，添加错误捕获逻辑查看具体错误：

fetch('http://localhost:8000/api/make-post/', requestOptions)
.then(response => {
    console.log(response)
    if(response.ok){
        return response.json();
    } else {
        // 解析并抛出错误详情
        return response.json().then(err => { throw err; });
    }
})
.catch(error => {
    console.error('请求错误详情:', error);
});

// 暂时注释刷新逻辑
// window.location.reload();

内容的提问来源于stack exchange，提问作者stara chwesiuka