使用 CSRF_COOKIE_HTTPONLY = True 将 angular 表单提交到 django 后端
Submit angular form to django backend with CSRF_COOKIE_HTTPONLY = True
我有一个 angular 表单,我想通过 post 请求提交到我的 django 后端。对此的常规智慧是在您的 Angluar 应用程序上使用以下技巧:
angularApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);
但是,这需要您的 cookie javascript 可访问。当你有 django 设置 CSRF_COOKIE_HTTPONLY = True
时,你如何从 angular 向 django 发出 post 请求?
请注意,这个问题也可能是关于如何将 angular 与基于 django 会话的 csrf 令牌(例如 https://github.com/mozilla/django-session-csrf)一起使用,因为这与 angular 无法从 cookie 访问 crsf 令牌。
免责声明: 此答案适用于 Django 1.9 或如果您在每个页面上使用单独的 angular 应用程序。这是因为 Django 1.10 更改了 CSRF 中间件以在每次请求后更改令牌。对于 Django 1.10+ 上的单页 angular 应用程序 运行,请参阅 Pass Django CSRF token to Angular with CSRF_COOKIE_HTTPONLY
答案:
在您模板的某处,将 csrf 令牌附加到您的 window:
<script type='text/javascript'>
window.csrfmiddlewaretoken = "{{ csrf_token }}";
</script>
然后,您可以直接在 header 个 post 请求上设置 csrf 令牌,而不需要 cookie:
angularApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.headers.post["X-CSRFToken"] = window.csrfmiddlewaretoken;
}]);
我有一个 angular 表单,我想通过 post 请求提交到我的 django 后端。对此的常规智慧是在您的 Angluar 应用程序上使用以下技巧:
angularApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);
但是,这需要您的 cookie javascript 可访问。当你有 django 设置 CSRF_COOKIE_HTTPONLY = True
时,你如何从 angular 向 django 发出 post 请求?
请注意,这个问题也可能是关于如何将 angular 与基于 django 会话的 csrf 令牌(例如 https://github.com/mozilla/django-session-csrf)一起使用,因为这与 angular 无法从 cookie 访问 crsf 令牌。
免责声明: 此答案适用于 Django 1.9 或如果您在每个页面上使用单独的 angular 应用程序。这是因为 Django 1.10 更改了 CSRF 中间件以在每次请求后更改令牌。对于 Django 1.10+ 上的单页 angular 应用程序 运行,请参阅 Pass Django CSRF token to Angular with CSRF_COOKIE_HTTPONLY
答案:
在您模板的某处,将 csrf 令牌附加到您的 window:
<script type='text/javascript'>
window.csrfmiddlewaretoken = "{{ csrf_token }}";
</script>
然后,您可以直接在 header 个 post 请求上设置 csrf 令牌,而不需要 cookie:
angularApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.headers.post["X-CSRFToken"] = window.csrfmiddlewaretoken;
}]);