Django Angular 4 CLI中的CSRF令牌

我创建了一个包含Angular、Node、Express和Postgres的完整堆栈应用程序：

现在，我试图通过在后端使用Django而不是节点JS重复该项目来学习Django。整个代码如下所示：

我无法提取Django在Angular中发送的CSRF令牌，以便在提交POST表单时将其发送回

在Django，我有以下两种观点：

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from . import models, forms

# Create your views here.

def basic_list(request):
    print(request)
    customer_list = []
    for customer_item in models.Customer.objects.all():
        customer_list.append({
            "first_name": customer_item.first_name,
            "last_name": customer_item.last_name,
            "city": customer_item.city
        })
    print(customer_list)
    return JsonResponse(customer_list, safe=False)

def empty_form(request):
    print(request)
    return HttpResponse("Form received")

在我的settings.py文件中，我启用了“django.middleware.csrf.CsrfViewMiddleware”。我查看了Django文档：

我尝试在settings.py文件中添加几个选项：

CSRF_USE_SESSIONS = True
CSRF_HEADER_NAME = 'HTTP_X_CSRFTOKEN'
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_HEADERS = (
    'content-type',
    'HTTP_X_CSRFTOKEN'
)

CORS_EXPOSE_HEADERS = [
    'content-type',
    'HTTP_X_CSRFTOKEN']

我的角度分量有：

import { Component, OnInit } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  sample_form: FormGroup;
  server_token: any;

  constructor(private http: Http) {
    this.sample_form = new FormGroup({
      'first_name': new FormControl(null),
      'last_name': new FormControl(null)
    });
  }

  ngOnInit() {}

  viewCustomers() {
    this.http.get('http://127.0.0.1:8000/list/')
        .subscribe((response: Response) => {
          console.log(response.headers.keys());
          this.server_token = response.headers.get('http_x_csrftoken');
          console.log(response.headers.get('http_x_csrftoken'));
          console.log(response.json());
        });
  }

  send_sample_form() {
    let my_headers = new Headers({'x-csrftoken': this.server_token});
    this.http.post('http://127.0.0.1:8000/emptyform/',
          {'my_form': this.sample_form.value},
          {headers: this.server_token})
          .subscribe(
            (response) => {
              console.log(response.headers.keys());
              console.log(response);
            }
          );
  }

}

我无法从标头中提取CSRF令牌。命令： log（response.headers.keys（））

仅显示标题内容类型。如何获取此令牌并在POST请求中将其发送回Django。当我在settings.py中禁用“django.middleware.csrf.CsrfViewMiddleware”时，它就可以工作了。因此，没有其他跨站点问题

---

提前谢谢

这可能对您有所帮助：它仅适用于Angular 5 HttpClient？对于Angular 4 Http，它只是说观察不在RequestOptions中。Http文档也没有提到这一点。我刚才看到您使用的是

Http

，而不是

HttpClient

。如果使用角4.3或更高，请考虑移动到<代码> HTTPcli客< /代码>。code>Http将在将来消失。对不起，给您添了点麻烦！我使用的是Angular 4.2.4。所以我必须升级。我更新了Angular并尝试了链接中的代码块。但我仍然只有一个标题“内容类型”。Django是否在其他地方插入CSRF令牌？