如何从Django 2.2向Angular 8发布请求添加CSRF令牌

Question

我有一个带有Django后端和angular前端的应用程序。现在，这些相互连接，我可以从Django获取数据并在Angular中显示。以及向Django发送帖子请求。

但是问题在于Django中的CSRF令牌。我在Django中禁用了CSRF中间件，并且完全禁用了请求过程，但是我知道这是不安全的。

发布请求的方法。

loadQuestion(id): Observable<any> {
    const body = {'choice': 'teseted with post method'};
    return this.http.post(this.baseUrl + id + '/vote', {headers: this.header, withCredentials: true, });
  }

我根据此link做了一些更改。

HttpClientXsrfModule.withConfig({ cookieName: 'csrftoken', headerName: 'X-CSRFToken' })

但我收到此错误。

app.module.ts：26未捕获的TypeError：_angular_common_http__WEBPACK_IMPORTED_MODULE_3 __。HttpClientXsrfModule.withConfig不是函数

所以我根据此Link进行了更改

HttpClientXsrfModule.withOptions({ cookieName: 'csrftoken', headerName: 'X-CSRFToken' })

这是我的Django函数，用于返回数据，正如我在禁用CSRF中间件时说的那样，所以我应该修复CSRF问题并通过Angular请求传递它。

def vote(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    try:
        selected_choice = question.choice_set.get(pk=4)
    except (KeyError, Choice.DoesNotExist):
        # Redisplay the question voting form.
        return HttpResponse("You didn't select a choice.")
    else:
        selected_choice.votes += 1
        selected_choice.save()
        # Always return an HttpResponseRedirect after successfully dealing
        # with POST data. This prevents data from being posted twice if a
        # user hits the Back button.
        return HttpResponse(request)

我评论的中间件代码：

'django.middleware.csrf.CsrfViewMiddleware'

并且错误是CSRF verification failed. Request aborted.

更新

我使用CORS Origin，这是我的Django配置

CORS_ORIGIN_ALLOW_ALL = True

CSRF_COOKIE_SECURE = False
CSRF_USE_SESSIONS = False

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'X-CSRFToken',
    'x-csrftoken',
    'X-XSRF-TOKEN',
    'XSRF-TOKEN',
    'csrfmiddlewaretoken',
    'csrftoken',
    'X-CSRF'
)

CORS_ALLOW_CREDENTIALS = True

Answer 1

您可以用csrf_exempt包裹视图>

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def vote():
...
“如果您使用的是AngularJS 1.1.3及更高版本，只需使用Cookie和标头名称配置$ http提供程序就足够了：”

httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';

Answer 2

所以我使用了一个名为ngx-cookie，link的库。安装它，然后将其添加到service.ts中。