React+Django注册时CSRF cookie未设置403错误排查求助

以下是针对你遇到的Forbidden (CSRF cookie not set.)错误的具体排查步骤：

1. 检查Django的CORS与CSRF信任配置 #

确保settings.py中包含以下关键配置，适配跨域场景：

# 允许跨域请求携带凭证
CORS_ALLOW_CREDENTIALS = True

# 允许的前端源（替换为你的React开发服务器地址，如http://localhost:3000）
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

# 信任的CSRF源，必须包含前端地址
CSRF_TRUSTED_ORIGINS = [
    "http://localhost:3000",
]

# 跨域场景下调整CSRF Cookie的SameSite属性
# 开发环境HTTP协议下，需关闭SECURE；生产环境HTTPS协议下开启SECURE
CSRF_COOKIE_SAMESITE = 'None'
CSRF_COOKIE_SECURE = False  # 开发环境设为False，生产环境设为True

2. 确认注册视图的CSRF验证逻辑 #

你仅提供了获取CSRF Token的视图，注册视图的配置是核心排查点：

• 如果注册视图是DRF的APIView，需要启用SessionAuthentication（DRF默认不启用，此时不会触发CSRF验证，但你的错误提示说明视图在做验证），示例代码：

  from rest_framework.authentication import SessionAuthentication
  from django.views.decorators.csrf import csrf_protect
  from django.utils.decorators import method_decorator
  
  class RegisterView(APIView):
      authentication_classes = [SessionAuthentication]
      permission_classes = (permissions.AllowAny,)
      
      @method_decorator(csrf_protect)
      def post(self, request):
          # 注册逻辑代码
  

• 如果是普通Django视图（非DRF），必须用csrf_protect装饰器包裹POST方法。

3. 调整axios的配置方式 #

• 全局设置withCredentials，避免单个请求配置遗漏：

  // 在React项目的axios初始化文件（如src/axios.js）中添加
  import axios from 'axios';
  axios.defaults.withCredentials = true;
  

• 确保注册请求使用最新的CSRF Token：在发起注册请求前重新获取一次Token，避免Token过期或未正确初始化：

  export const register = (username, password, re_password) => async dispatch => {
      // 先重新获取CSRF Token
      await axios.get(`${process.env.REACT_APP_API_URL}/accounts/csrf_cookie`);
      
      const config = {
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'X-CSRFToken': Cookies.get('csrftoken')
          }
      };
      // 后续请求逻辑不变
  }
  

4. 检查浏览器Cookie的实际状态 #

打开浏览器开发者工具（F12）→ Application → Cookies → 查看localhost:8000下的csrftoken：

• 确认Cookie存在，且SameSite属性与settings.py中的配置一致；
• 确认Cookie的Domain为localhost，无错误配置。

5. 验证请求头与Cookie的携带情况 #

在开发者工具的Network标签中，查看注册请求的：

• Request Headers：确认X-CSRFToken字段存在，且值与Cookie中的csrftoken完全一致；
• Cookies：确认csrftoken被携带到请求中（withCredentials设置正确时，跨域请求会自动携带Cookie）。

内容的提问来源于stack exchange，提问作者Caden The Yak