Angular13向DRF提交POST数据时遇CSRF令牌缺失错误求助

核心配置与代码修正 #

DRF默认开启CSRF防护，Angular的HttpClientXsrfModule需匹配DRF的规则才能自动携带token，以下是关键修复步骤：

1. 正确配置HttpClientXsrfModule #

在app.module.ts中配置DRF对应的CSRF cookie和请求头名称：

import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'csrftoken', // DRF默认的CSRF cookie名称
      headerName: 'X-CSRFToken', // DRF默认接收的CSRF请求头名称
    })
  ]
})
export class AppModule { }

2. 请求开启凭据携带 #

在sources.service.ts的POST请求中添加withCredentials: true，确保浏览器自动携带CSRF cookie：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SourcesService {
  private apiUrl = 'http://你的DRF接口地址/sources/';

  constructor(private http: HttpClient) { }

  addSource(sourceData: any): Observable<any> {
    return this.http.post(this.apiUrl, sourceData, {
      withCredentials: true // 必须开启，否则Cookie不会被携带
    });
  }
}

3. 跨域场景下DRF的CORS配置 #

如果Angular和DRF不在同一域名，修改DRF的settings.py允许跨域携带凭据：

INSTALLED_APPS = [
    # ...
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ...
]

CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = [
    'http://localhost:4200', # 你的Angular项目地址
]

4. 组件代码避免手动干扰CSRF头 #

在add-source.component.ts中，不要手动设置X-CSRFToken请求头，交给HttpClientXsrfModule自动处理：

import { Component } from '@angular/core';
import { SourcesService } from '../sources.service';

@Component({
  selector: 'app-add-source',
  templateUrl: './add-source.component.html',
  styleUrls: ['./add-source.component.css']
})
export class AddSourceComponent {
  sourceForm = {
    name: '',
    url: '' // 对应你的表单字段
  };

  constructor(private sourcesService: SourcesService) { }

  onSubmit() {
    this.sourcesService.addSource(this.sourceForm).subscribe({
      next: res => console.log('添加成功', res),
      error: err => console.error('请求失败', err)
    });
  }
}

排查要点 #

• 打开浏览器控制台的Application标签，确认csrftoken cookie是否存在
• 查看网络请求的Request Headers，确认X-CSRFToken是否被自动添加
• 检查DRF的settings.py，确保django.middleware.csrf.CsrfViewMiddleware在MIDDLEWARE列表中

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