React表单向Django-Rest-Framework传递CSRF令牌及POST请求验证问题

兄弟，你这情况太典型了！既然关闭认证就能正常提交，说明接口逻辑完全没问题，核心问题就是React前端没正确传递Session认证所需的CSRF令牌和会话凭证，下面给你一步步搞定：

1. 先搞懂SessionAuthentication的核心要求 #

DRF的SessionAuthentication依赖Django的session机制，必须满足两个关键条件：

• 请求必须带上Django设置的csrftoken cookie对应的请求头X-CSRFToken
• 请求要携带session凭证（让DRF识别当前登录的用户）

2. 前端获取并传递CSRF令牌 #

首先你得从浏览器cookie里读取Django生成的csrftoken，然后在提交请求时放到请求头里：

方法1：用js-cookie库（推荐） #

先安装依赖：

npm install js-cookie

然后在表单提交代码里这么写：

import Cookies from 'js-cookie';

// 读取csrf令牌
const csrftoken = Cookies.get('csrftoken');

// 用fetch发送表单请求
fetch('/api/property/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRFToken': csrftoken,
  },
  credentials: 'include', // 必须带上session cookie，这步很关键！
  body: JSON.stringify(你的表单数据对象),
})
.then(response => response.json())
.catch(error => console.error('提交失败:', error));

方法2：原生JS读取cookie（不用额外库） #

如果不想加依赖，也可以自己写个小方法读取：

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 csrftoken = getCookie('csrftoken');
// 后续请求代码和上面一致，务必加上credentials: 'include'

3. 跨域场景额外配置（React和Django不在同一域名时） #

如果你的React跑在localhost:3000，Django在localhost:8000，属于跨域请求，需要给Django配置允许带凭证的跨域：

安装django-cors-headers #

pip install django-cors-headers

修改Django的settings.py #

INSTALLED_APPS = [
    # 其他已安装的app...
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 必须放在CommonMiddleware前面
    'django.middleware.common.CommonMiddleware',
    # 其他中间件...
]

# 允许你的React域名发起跨域请求
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]
# 允许携带session/cookie等凭证
CORS_ALLOW_CREDENTIALS = True

4. 最后确认用户已登录 #

别忘了IsAuthenticated权限要求用户必须先完成登录！前端要先通过Django的登录接口（比如/accounts/login/）登录，确保浏览器里已经保存了session cookie，再提交表单。

按上面的步骤操作，应该就能顺利解决你的认证问题了！

内容的提问来源于stack exchange，提问作者jeff m