Angular 17对接Django时CSRF Token验证失败致403错误求助

核心问题分析 #

你的POST请求触发Django CSRF验证失败，尽管Angular配置了HttpClientXsrfModule，但可能在跨域配置、请求参数或Cookie传递上存在遗漏。

分步解决方法 #

1. 配置Django跨域支持（前后端分离场景） #

如果Angular和Django运行在不同域名/端口，必须配置CORS允许携带凭证：

• 安装依赖：

  pip install django-cors-headers
  

• 修改settings.py：

  # 添加到INSTALLED_APPS
  INSTALLED_APPS = [
      ...
      'corsheaders',
  ]
  
  # 调整MIDDLEWARE顺序，CorsMiddleware需放在CommonMiddleware之前
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      ...
      'django.middleware.csrf.CsrfViewMiddleware',  # 确保该中间件存在
      ...
  ]
  
  # 允许请求携带Cookie
  CORS_ALLOW_CREDENTIALS = True
  # 添加你的Angular应用地址
  CORS_ORIGIN_WHITELIST = [
      "http://localhost:4200",  # 根据实际端口修改
  ]
  
  # 信任Angular域名的CSRF请求
  CSRF_TRUSTED_ORIGINS = [
      "http://localhost:4200",
  ]
  

2. 修改Angular请求，开启凭证传递 #

Angular的HttpClient默认不会在跨域请求中携带Cookie，需要显式开启：

postPlayers(player: Player): Observable<any>
{
   return this.http.post(this.url, player, { 
       headers: { Accept: 'application/json' },
       withCredentials: true  // 关键：允许携带Cookie
   });
}

3. 确保Django正确设置CSRF Cookie #

开发环境下，关闭HTTPS强制（避免Cookie无法正常设置）：
在settings.py中添加：

CSRF_COOKIE_SECURE = False
SESSION_COOKIE_SECURE = False

先发送一次GET请求到player_list，用浏览器开发者工具检查Application → Cookies下是否存在csrftoken。

4. 验证请求头 #

用浏览器Network面板查看POST请求的Headers：

• 确认存在X-CSRFToken头，且值与Cookie中的csrftoken一致
• 确认Content-Type为application/json（Angular默认会自动设置）

最后检查 #

去掉视图函数的@csrf_exempt装饰器，重新测试POST请求。如果仍有问题，确认：

• Django中间件中CsrfViewMiddleware的位置正确（需在SessionMiddleware之后，其他视图中间件之前）
• 没有手动修改过Django的CSRF验证逻辑

内容的提问来源于stack exchange，提问作者Ahsan Abdul Salam