使用Django-allauth和React实现Google登录时遭遇CSRF禁止错误

问题原因 #

你遇到的403 Forbidden错误是因为React请求未携带Django要求的CSRF令牌，直接访问后端页面时，模板内的{% csrf_token %}会自动生成并携带该令牌，因此能正常触发登录流程。另外，/accounts/google/login/本身是引导用户跳转至Google授权页的入口，并非纯API接口，直接用axios POST不符合它的设计逻辑。

解决方案 #

方案1：用弹窗打开Google登录页面（最简单直接） #

无需使用axios POST，直接通过弹窗打开Django的Google登录端点，登录完成后同步前端状态：

const handleGoogleLogin = () => {
  // 定义弹窗尺寸与位置
  const width = 600;
  const height = 600;
  const left = window.innerWidth / 2 - width / 2;
  const top = window.innerHeight / 2 - height / 2;
  
  // 打开登录弹窗
  const loginWindow = window.open(
    "https://127.0.0.1:8000/accounts/google/login/",
    "GoogleLogin",
    `width=${width},height=${height},left=${left},top=${top}`
  );

  // 定时检查弹窗状态，关闭后同步登录信息
  const checkLoginStatus = setInterval(() => {
    if (loginWindow.closed) {
      clearInterval(checkLoginStatus);
      // 此处可添加获取用户登录状态的逻辑，比如调用后端用户信息接口
      console.log("登录弹窗已关闭，可同步用户状态");
    }
  }, 1000);
};

方案2：携带CSRF令牌发起请求（不推荐，会跳过原生跳转流程） #

如果一定要用axios发起请求，需先获取Django设置的CSRF cookie，再将令牌放入请求头：

1. 配置Django跨域与CSRF信任（settings.py）：

INSTALLED_APPS = [
    # 其他已安装应用
    'corsheaders',
]

MIDDLEWARE = [
    # 其他中间件
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

# 允许React域名跨域
CORS_ALLOWED_ORIGINS = [
    "https://localhost:3000",
    "https://127.0.0.1:3000",
]

# 允许携带cookie
CORS_ALLOW_CREDENTIALS = True

# 配置CSRF信任来源
CSRF_TRUSTED_ORIGINS = [
    "https://localhost:3000",
    "https://127.0.0.1:3000",
]

2. React端实现请求逻辑：

import axios from 'axios';

// 创建带cookie的axios实例
const axiosInstance = axios.create({
  withCredentials: true,
});

// 从cookie中提取CSRF令牌
const getCsrfToken = () => {
  const cookieValue = document.cookie
    .split('; ')
    .find(row => row.startsWith('csrftoken='))
    ?.split('=')[1];
  return cookieValue;
};

const handleGoogleLogin = () => {
  const csrfToken = getCsrfToken();
  axiosInstance.post(
    "https://127.0.0.1:8000/accounts/google/login/",
    {},
    {
      headers: {
        'X-CSRFToken': csrfToken,
      },
    }
  ).then((response) => {
    // 接收跳转响应，重定向至Google授权页
    window.location.href = response.request.responseURL;
  }).catch((error) => {
    console.error(error);
  });
};

注意事项 #

• 方案1更符合allauth社交登录流程，能保留Google授权页的原生交互体验。
• 确认Google凭证中已注册Django域名（https://127.0.0.1:8000），回调路径为/accounts/google/login/callback/。
• 测试时需保证前后端均为HTTPS：React可通过HTTPS=true npm start启动，避免浏览器跨域与cookie安全限制。

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