React集成Django时CSRF验证失败（403 Forbidden）求助

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

1. 确保CSRF Cookie先被生成 #

@ensure_csrf_cookie装饰器会在GET请求的响应中设置CSRF Cookie，所以你必须先通过GET请求访问login_view，再发起POST登录请求。如果直接调用POST接口，浏览器还没收到Cookie，自然会验证失败。

• 测试方法：在浏览器中先访问/api/login（GET方式），然后在控制台输入document.cookie，检查是否包含csrftoken字段。

2. 根据环境调整SECURE参数 #

当SESSION_COOKIE_SECURE和CSRF_COOKIE_SECURE设为True时，浏览器只会在HTTPS连接下发送这些Cookie：

• 本地开发（HTTP协议，如localhost:8000）：必须将两个参数设为False，并重启Django服务器生效。
• 生产环境（HTTPS）：保持True即可，但要确保前端和后端都使用HTTPS。

3. 验证CSRF Token的获取和传递 #

• 检查getCookie函数是否正确拿到Token：在fetch前添加console.log(csrftoken)，如果输出null，说明Cookie未生成或未被正确读取，回到步骤1排查。
• 确认请求头名称：Django默认只识别X-CSRFToken作为请求头，你的代码中设置正确，无需修改为其他名称。

4. 处理跨域场景（如果存在） #

如果前端和后端域名/端口不同（如前端localhost:3000，后端localhost:8000）：

• 在settings.py中添加信任的源：

  CSRF_TRUSTED_ORIGINS = ['http://localhost:3000']  # 替换为你的前端地址
  

• 确保fetch的credentials: 'include'已正确设置（你的代码中已添加，无需修改）。

5. 中间件配置检查 #

确认settings.py的MIDDLEWARE列表中包含：

'django.middleware.csrf.CsrfViewMiddleware',

该中间件是CSRF验证的核心，必须存在且顺序正确（通常放在SessionMiddleware之后）。

6. 关于无痕模式的影响 #

无痕模式主要限制第三方Cookie，但同域名请求不受影响。如果是跨域场景，需确保CSRF_TRUSTED_ORIGINS配置正确，否则无痕模式下可能会阻止Cookie传递。

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