当他们分开时,Django的csrf_token进入Vuejs

Question

我正在使用ajax请求发送POST但由于csrf_token它得到了响应403.我只是使用Vuejs和后端使用Django来分割前端只是为了响应API所以我不能使用Django模板来渲染{%csrf_token%}或者在会话中使用csrftoken来使用getcookie('csrftoken'),就像在Django的doc推荐中一样.有没有人像我一样面对这个问题并得到一些解决方案？谢谢你,如果你可以帮助我.

Answer 1

您可以在 AJAX 请求的标头中设置 CSRF 令牌。例如，如果您使用 jquery 和 jquery.cookie 库，您可以csrftoken像这样轻松检索 Django 设置的cookie：

$.ajax({
    url : 'YOUR_URL_HERE',
    headers: {'X-CSRFToken': $.cookie('csrftoken')},
    type: 'POST',
    dataType: 'json',
    data: {},
    success: function() {

    },
    error: function(xhr, errMsg, err) {
    },  
});

Django 文档还包括一个关于此的部分：https : //docs.djangoproject.com/en/1.11/ref/csrf/#ajax

请注意，此解决方案可能取决于您的特定 Django 设置。上面的 Django 文档链接非常清楚地详细说明了所有内容。

编辑：

鉴于即使您的初始页面请求也不是由 Django 提供的，以下是您如何完成您正在寻找的内容......

1.) 在您的 Django 应用程序中创建一个手动生成并返回 CSRF 令牌的视图（使用django.middleware.csrf.get_token）：

def get_csrf_token(request):
    token = django.middleware.csrf.get_token(request)
    return JsonResponse({'token': token})

2.) 您还需要在 Django URLs 文件中添加适当的条目：

url(r'^get-token/$', get_csrf_token)

3.) 然后您的 Vue.js 应用程序可以使用此端点获取 CSRF 令牌。这不需要是用户发起的事件；例如，您可以配置前端应用程序以在$(document).ready()事件中获取它。然后，使用您首选的 AJAX 库（我在示例中使用 jQuery）：

$.ajax({
    url: '/get-token/',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
       $.cookie('csrftoken', data.token); // set the csrftoken cookie
    }
});

4.) 现在您的csrftokencookie 已设置并且应该可用于后续的 POST 请求。

$.ajax({
    url : 'YOUR_URL_HERE',
    headers: {'X-CSRFToken': $.cookie('csrftoken')},
    type: 'POST',
    dataType: 'json',
    data: {},
    success: function() {

    },
    error: function(xhr, errMsg, err) {
    },  
});

我已经将 jQuery 用于 AJAX 功能，并使用 jQuery.cookie 库来获取和设置 cookie，但是当然您可以使用您喜欢的任何库来实现这些功能。