登录时提示CSRF令牌缺失，如何从Angular 2向Django后端发送CSRF Token？

首先，Django的CSRF防护机制要求非GET请求必须携带X-CSRFToken请求头，且该头的值要与Cookie中的csrftoken一致。针对你的场景，有两种常用的解决方式：

方式一：在单个请求中手动添加CSRF Token #

基于你已有的代码（使用了ng2-cookies），可以直接在login方法里获取Cookie中的CSRF Token并添加到请求头：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Cookie } from 'ng2-cookies';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthenticationService {
  constructor(private http: HttpClient){}

  login(username:string, password:string): Observable<any> {
    // 从Cookie中获取Django设置的csrftoken
    const csrfToken = Cookie.get('csrftoken');
    
    // 构建请求头，添加CSRF Token
    const headers = new HttpHeaders({
      'X-CSRFToken': csrfToken,
      'Content-Type': 'application/json' // 如果你的登录请求是JSON格式的话
    });

    // 发送POST请求，带上请求头
    return this.http.post('/api/login/', { username, password }, { headers: headers })
      .map(response => {
        // 处理登录响应逻辑
        return response;
      });
  }
}

方式二：使用HTTP拦截器自动为所有请求添加CSRF Token #

如果你的应用中有很多需要CSRF验证的请求，推荐用拦截器来统一处理，这样不用每个请求都手动加头：

1. 创建一个CSRF拦截器：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Cookie } from 'ng2-cookies';

@Injectable()
export class CsrfInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 只对非GET请求添加CSRF Token（Django对GET请求不做CSRF验证）
    if (req.method !== 'GET') {
      const csrfToken = Cookie.get('csrftoken');
      // 克隆请求并添加CSRF头
      const clonedReq = req.clone({
        headers: req.headers.set('X-CSRFToken', csrfToken)
      });
      return next.handle(clonedReq);
    }
    return next.handle(req);
  }
}

2. 在你的AppModule中注册这个拦截器：

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CsrfInterceptor } from './csrf.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CsrfInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

注意事项 #

• 确保Django已经正确设置了csrftoken Cookie：通常Django会在用户访问任意页面时自动设置这个Cookie（前提是你在模板中使用了{% csrf_token %}或者视图中使用了ensure_csrf_cookie装饰器）。
• 如果是跨域请求，你需要在Django的CORS配置中允许携带Cookie和X-CSRFToken请求头（比如使用django-cors-headers库，设置CORS_ALLOW_CREDENTIALS = True）。

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