Django+React认证系统登出403问题：服务端正常前端报错

1. 配置 Django 跨域（CORS）设置 #

由于 React 和 Django 运行在不同端口（跨域场景），必须正确配置 CORS 以允许请求携带凭证（如 Session 和 CSRF Cookie）：

操作步骤： #

• 安装跨域依赖：

  pip install django-cors-headers
  

• 在 settings.py 中添加以下配置：

  INSTALLED_APPS = [
      ...
      'corsheaders',  # 新增跨域应用
      ...
  ]
  
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',  # 必须放在 CommonMiddleware 之前
      'django.middleware.common.CommonMiddleware',
      ...
  ]
  
  # 允许请求携带凭证（关键配置）
  CORS_ALLOW_CREDENTIALS = True
  
  # 允许 React 应用的来源（替换为你的 React 端口，通常是 3000）
  CORS_ALLOWED_ORIGINS = [
      "http://localhost:3000",
      "http://127.0.0.1:3000",
  ]
  
  # 配置 Session Cookie 跨域属性
  SESSION_COOKIE_SAMESITE = 'Lax'  # HTTPS 环境下改为 'None'
  SESSION_COOKIE_SECURE = False    # HTTPS 环境下改为 True
  

2. 确保 CSRF 令牌正确传递 #

虽然你已配置 Axios 默认值，但可手动验证并显式传递令牌以避免遗漏：

在 React 中添加获取 CSRF 令牌的工具函数： #

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;
}

修改 Axios 登出请求，显式携带令牌： #

const submitLogout = () => {
  const csrfToken = getCookie('csrftoken');
  axios
    .post(
      "http://127.0.0.1:8000/user/logout",
      {},  // POST 请求需传入空请求体
      {
        headers: {
          'X-CSRFToken': csrfToken
        }
      }
    )
    .then(response => {
      console.log(response);
    })
    .catch(error => {
      console.log(error);
    });
}

3. 优化 Django 视图权限（可选但推荐） #

为登出视图添加认证权限，确保仅已登录用户可访问：

from rest_framework.permissions import IsAuthenticated

class UserLogOutView(APIView):
    permission_classes = [IsAuthenticated]  # 新增权限控制

    def post(self, request):
        logout(request)
        return Response(status=status.HTTP_200_OK)

4. 调试技巧 #

• 打开浏览器开发者工具（F12）→ Network 标签：
  • 查看登出请求的 Headers，确认 X-CSRFToken 头部存在，且 csrftoken Cookie 已发送。
  • 检查 Response 标签，查看 Django 返回的具体错误细节（通常会包含 CSRF 验证失败的原因）。

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