将Django的csrf_token分离成Vuejs [英] csrf_token of Django into Vuejs when seperate them

问题描述

我正在使用ajax请求发送POST，但由于csrf_token而收到响应403。我仅使用Vuejs对前端进行划分，而使用Django仅对API进行响应，因此我无法使用Django模板来渲染{％csrf_token％}，也不能像在Django的文档建议中那样使用csrftoken在会话中使用getcookie（'csrftoken'）。有没有人像我这样面对这个问题并找到解决方案？因此，如果能帮助我，谢谢您。

I am using ajax request to send POST but it got response 403 because of csrf_token. I divide the frontend just using Vuejs and backend using Django to just reponse API only so I can't use Django template to render {% csrf_token %} or having csrftoken in session to use getcookie('csrftoken') like in Django's doc recommend. Is there anybody face this problem like me and got some solutions ? So thank you if you can help me this.

推荐答案

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

You can set the CSRF token in the header of your AJAX request. E.g., if you use jquery and jquery.cookie library, you can easily retrieve the Django-set csrftoken cookie like so:

$.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 documentation also includes a section on this: https://docs.djangoproject.com/en/1.11/ref/csrf/#ajax

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

Please note that this solution may depend on your specific Django settings. The Django documentation link above details everything pretty clearly.

编辑：

即使您的初始页面请求也是不受Django的支持，这是您可以完成所需工作的方法...

Given that even your initial page request is not served by Django, here is how you can accomplish what you're looking for...

1。）在Django应用中创建一个视图，该视图可手动生成并返回CSRF令牌（使用 django.middleware.csrf.get_token ）：

1.) Create a view in your Django app that manually generates and returns a CSRF token (using django.middleware.csrf.get_token):

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

2。）您还需要在Django URL文件中添加适当的条目：

2.) You would also need to add an appropriate entry in your Django URLs file:

url（r'^ get-token / $'，get_csrf_token）

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

3.) Then your Vue.js app can fetch the CSRF token using this endpoint. This doesn't need to be a user-initiated event; for example, you can configure your front-end app to fetch it on the $(document).ready() event. Then, using your preferred AJAX library (I am using jQuery in my example):

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

4。）现在，您的 csrftoken cookie是设置，并且应该可用于后续的POST请求。

4.) Now your csrftoken cookie is set and should be usable for subsequent POST requests.

$.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，但是当然，您可以使用想要使用这些函数的任何库。

I have used jQuery for AJAX functionality and the jQuery.cookie library for getting and setting cookies, but of course you can use whichever library you would prefer for these functions.

这篇关于将Django的csrf_token分离成Vuejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！