Vue.js 将它们分开时将 Django 的 csrf_token 放入 Vuejs

可以在AJAX请求的头中设置CSRF令牌.例如，如果使用jquery和jquery.cookie library，您可以轻松检索Django set csrftoken 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 URL文件中添加适当的条目:

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.)现在您的csrftoken cookie已经设置好，应该可以用于后续的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，但当然，您可以使用任何一个库来实现这些功能.