使用 CSRF_COOKIE_HTTPONLY = True 将 Angular 表单提交给 django 后端答案

【问题标题】：Submit angular form to django backend with CSRF_COOKIE_HTTPONLY = True使用 CSRF_COOKIE_HTTPONLY = True 将 Angular 表单提交给 django 后端
【发布时间】：2015-08-19 18:50:07
【问题描述】：

我有一个角度表单，我想通过 post 请求提交到我的 django 后端。对此的常规智慧是在您的角度应用程序上使用以下技巧：

angularApp.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);

但是，这要求您的 cookie 可以通过 javascript 访问。当您有 django 设置 CSRF_COOKIE_HTTPONLY = True 时，如何使从 angular 到 django 的发布请求工作？

请注意，这个问题也可能是关于如何将 angular 与基于 django 会话的 csrf 令牌一起使用（例如使用 https://github.com/mozilla/django-session-csrf），因为这具有 angular 无法从 cookie 访问 crsf 令牌的相同问题.

【问题讨论】：

标签： angularjs django csrf django-csrf

【解决方案1】：

免责声明：此答案适用于 Django 直到 1.9，或者如果您在每个页面上使用单独的 Angular 应用程序。这是因为 Django 1.10 更改了 CSRF 中间件以在每次请求后更改令牌。对于在 Django 1.10+ 上运行的单页 Angular 应用程序，请参阅Pass Django CSRF token to Angular with CSRF_COOKIE_HTTPONLY

答案：

在模板中的某处，将 csrf 令牌附加到您的窗口：

<script type='text/javascript'>
    window.csrfmiddlewaretoken = "{{ csrf_token }}";
</script>

然后，您可以直接在 post 请求的 header 上设置 csrf 令牌，而不需要 cookie：

angularApp.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.post["X-CSRFToken"] = window.csrfmiddlewaretoken;
}]);

【讨论】：