React中Axios POST请求在Django后端显示匿名用户的解决方法

我使用Axios发送GET请求时，能成功将登录用户信息传递至Django后端，但对同一接口发送POST请求时，后端显示请求来自匿名用户，而非已登录用户。

正常工作的GET请求代码 #

前端Axios代码 #

await axios({
      method: 'get',
      url: BASE_BACKEND_URL + `/project/` + project_uuid + `/`,
      data: {},
      headers: { 'Content-Type': 'application/octet-stream' },
      withCredentials: true,
    })

Django后端代码 #

class ProjectView(APIView):
    def get(self, request, uuid):
        logging.info("ProjectManifest GET begin")
        user            = request.user
        print(user)

异常的POST请求代码 #

前端Axios代码 #

await axios({
      method: 'post',
      url: BASE_BACKEND_URL + '/project/' + project_uuid + '/',
      data: { project_uuid : projectJSON },
      headers: { 'Content-Type': 'application/json', },
      withCredentials: true,
    })

Django后端代码 #

class ProjectView(APIView):
    def post(self, request, uuid):
        logging.info(f"ProjectManifest POST begin: {request.user}")

解决方法 #

• 添加CSRF令牌到POST请求头
  Django的CSRF中间件会验证POST请求的CSRF令牌，缺少令牌会导致会话无法被识别，请求被视为匿名用户。需要从Cookie中提取CSRF令牌，并添加到请求头：

  // 提取CSRF令牌
  const csrfToken = document.cookie.match(/csrftoken=([^;]+)/)[1];
  await axios({
    method: 'post',
    url: BASE_BACKEND_URL + '/project/' + project_uuid + '/',
    data: { project_uuid : projectJSON },
    headers: { 
      'Content-Type': 'application/json',
      'X-CSRFToken': csrfToken
    },
    withCredentials: true,
  })
  

• 确认Django跨域配置（前后端分离场景）
  如果前后端域名不同，需确保Django允许跨域携带凭证：

  1. 安装并配置django-cors-headers
  2. 在settings.py中设置：

     CORS_ALLOW_CREDENTIALS = True
     CORS_ALLOWED_ORIGINS = [
         "http://你的前端域名:端口",
     ]
     

• 检查Django认证中间件
  确保settings.py的MIDDLEWARE中包含以下中间件：

  MIDDLEWARE = [
      # ... 其他中间件
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
      # ... 其他中间件
  ]
  

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