Django后端设置access_token Cookie后，React前端如何获取？

核心问题分析 #

1. response.headers['access_token'] 获取失败：Cookie是通过响应头Set-Cookie字段写入浏览器的，并非直接以access_token作为响应头键存在，所以从response.headers中无法直接拿到该值。
2. document.cookie 无效：开发者工具能看到Cookie说明后端设置成功，但跨域场景下，Cookie的读取和携带受SameSite属性、CORS配置以及httponly标志的限制。

具体解决方案 #

1. 配置Django的CORS支持

跨域场景下必须开启CORS并允许携带凭证，否则浏览器会拦截Cookie：

• 先安装依赖：

  pip install django-cors-headers
  

• 修改settings.py配置：

  INSTALLED_APPS = [
      # ... 其他已安装应用
      'corsheaders',
  ]
  
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',  # 需放在所有中间件最前面
      # ... 其他中间件
  ]
  
  # 允许跨域请求携带凭证
  CORS_ALLOW_CREDENTIALS = True
  # 允许你的前端域名，多个域名可继续添加
  CORS_ALLOWED_ORIGINS = [
      "http://localhost:5173",  # React开发环境示例地址
      "https://your-production-frontend.com",  # 生产环境域名
  ]
  

2. 修正Django的Cookie设置参数

调整set_cookie的参数适配跨域场景：

# Authentication successful
access_token = AccessToken.for_user(user)
refresh_token = RefreshToken.for_user(user)

response = JsonResponse({'message': 'Login successful', 'tire_stock': tire_stock_data})

# 设置access_token（若需前端JS读取，必须关闭httponly；无需读取则建议开启httponly提升安全性）
response.set_cookie(
    'access_token',
    str(access_token),
    secure=True,  # 生产环境必须开启，开发环境用HTTP的话需改为False
    httponly=False,
    samesite='None',  # 跨域场景必须设为None，且必须配合secure=True
    max_age=3600,  # 有效期1小时，按需调整
    path='/'  # 确保全站路径可访问该Cookie
)

# 设置refresh_token（保持httponly=True防止XSS攻击）
response.set_cookie(
    'refresh_token',
    str(refresh_token),
    httponly=True,
    secure=True,
    samesite='None',
    max_age=86400,  # 有效期1天，按需调整
    path='/'
)

return response

3. 前端请求的正确处理

• 无需手动提取Token：后续API请求只需保持withCredentials: true，浏览器会自动携带Cookie到后端：

  // 示例：后续接口请求
  const fetchUserData = async () => {
    const res = await axios.get(
      `${import.meta.env.VITE_URL}user/profile/`,
      { withCredentials: true }
    );
  };
  

• 若确实需要前端读取access_token（不推荐，存在XSS风险），确保后端httponly=False后，可通过解析document.cookie获取：

  const getCookieValue = (name) => {
    const cookieStr = `; ${document.cookie}`;
    const cookieParts = cookieStr.split(`; ${name}=`);
    return cookieParts.length === 2 ? cookieParts.pop().split(';').shift() : null;
  };
  const accessToken = getCookieValue('access_token');
  

关键注意事项 #

• secure=True的限制：开发环境使用HTTP协议时，需将secure改为False，否则浏览器不会存储Cookie（Secure标志要求Cookie仅通过HTTPS传输）。
• SameSite=None的要求：必须配合secure=True使用，否则浏览器会拒绝设置该Cookie。
• 安全建议：优先使用httponly=True的Cookie存储Token，避免前端JS读取，能有效防范XSS攻击；仅当业务必须前端持有Token时，才关闭httponly。

内容的提问来源于stack exchange，提问作者Hamzah Al-Hamadani