DRF集成Djoser开发React SPA时CSRF验证失败如何排查

问题定位 #

Postman、YASG调用接口正常，说明后端视图业务逻辑无问题，报错属于前后端分离场景下CSRF校验的配置不匹配导致，既可能是后端认证配置和你当前的鉴权方案不匹配，也可能是前端请求未携带要求的CSRF请求头，可按如下步骤排查：

排查步骤 #

1. 后端DRF配置校验 #

你当前的视图未显式指定认证类，默认会继承settings.py中REST_FRAMEWORK块的全局认证配置，DRF的SessionAuthentication默认强制开启CSRF校验：

# 你可以先确认settings.py里的对应配置
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.SessionAuthentication',
        # 其余自定义认证类
    ]
}

• 如果你的项目是前后端完全分离、用Token/ JWT做身份校验，不需要依赖Session认证，可以给对应视图关闭CSRF校验：

  from django.views.decorators.csrf import csrf_exempt
  from django.utils.decorators import method_decorator
  
  @method_decorator(csrf_exempt, name='dispatch')
  class BlogListAPIView(ListCreateAPIView):
      serializer_class = BlogSerializer
      queryset = Blog.objects.all()
  
  # 同理给BlogDetailAPIView也加相同的装饰器
  

  注意：该操作仅适用于无Session依赖的鉴权场景，如果你用Session做用户登录态存储，不要关闭CSRF校验，按下一步配置前端。

• 如果你的项目确实使用Session做身份校验，需要在settings.py中补充跨域相关配置（前后端端口/域名不同时必须配置）：

  CORS_ALLOW_CREDENTIALS = True
  # 替换为你实际的前端部署地址，禁止使用通配符*
  CORS_ALLOWED_ORIGINS = [
      "http://localhost:3000",
  ]
  CORS_EXPOSE_HEADERS = ["X-CSRFToken"]
  

2. 前端React配置校验 #

使用Session认证的场景下，Django要求所有非GET类请求（POST/PUT/DELETE等）必须同时满足两个条件才能通过CSRF校验：

• 请求Cookie中携带Django下发的csrftoken值
• 请求头中携带X-CSRFToken字段，值和Cookie中的csrftoken完全一致

你可以在React的全局请求拦截器（以axios为例）中添加逻辑，自动携带CSRF头：

import axios from 'axios'
import Cookies from 'js-cookie'

axios.interceptors.request.use((config) => {
  const csrfToken = Cookies.get('csrftoken')
  if (csrfToken) {
    config.headers['X-CSRFToken'] = csrfToken
  }
  // 跨域场景下必须开启携带Cookie
  config.withCredentials = true
  return config
})

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