CSRF令牌丟失或不正確AJAX/DJANGO

Question

有人可以幫我解決這個問題嗎？

我有我的網頁上的任務列表。每個任務都有自己的表單，用戶可以發送評論。當我添加新的任務AJAX更新評論列表，然後我嘗試發送評論的形式，並提出錯誤：「CSRF令牌丟失或不正確」。在其他任何情況下，表格都很好。我的表格中有{% csrf_token %}。好像我需要在AJAX中發送CSRF。我哪裏錯了？爲什麼它沒有工作？

JS：

function getCookie(name) { 
    var cookieValue = null; 
    if (document.cookie && document.cookie !== '') { 
     var cookies = document.cookie.split(';'); 
     for (var i = 0; i < cookies.length; i++) { 
      var cookie = jQuery.trim(cookies[i]); 
      // Does this cookie string begin with the name we want? 
      if (cookie.substring(0, name.length + 1) === (name + '=')) { 
       cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
       break; 
      } 
     } 
    } 
    return cookieValue; 
} 
var csrftoken = getCookie('csrftoken'); 

// TASK 

$(function() { 
    var loadForm = function() { 
     var btn = $(this); 
     $.ajax({ 
      url: btn.attr("data-url"), 
      type: 'get', 
      dataType: 'json', 
      beforeSend: function() { 
       $("#modal").modal("show"); 
      }, 
      success: function (data) { 
       $("#modal .modal-content").html(data.html_task_form); 
      } 
     }); 
    }; 

    var saveForm = function() { 
     var form = $(this); 
     $.ajax({ 
      url: form.attr("action"), 
      data: { 
       data: form.serialize(), 
       csrfmiddlewaretoken: getCookie('csrftoken') 
      }, 
      type: form.attr("method"), 
      dataType: 'json', 
      success: function (data) { 
       if (data.form_is_valid) { 
        $("#task-list").html(data.html_task); 
        $("#modal").modal("hide"); 
       } 
       else { 
        $("#modal .modal-content").html(data.html_task_form); 
       } 
      } 
     }); 
     $.ajaxSetup({ 
      beforeSend: function(xhr, settings) { 
       if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) { 
        xhr.setRequestHeader("X-CSRFToken", csrftoken); 
       } 
      } 
     }); 
     return false; 
    }; 

    // Create TASK 
    $("#task-add-button").click(loadForm); 
    $("#modal").on("submit", ".js-task-add-form", saveForm); 
    // Update TASK 
    $("#task-list").on("click", "#js-edit-task-button", loadForm); 
    $("#modal").on("submit", ".js-task-edit-form", saveForm); 
}); 

CODE徵求意見地址：

views.py：

def task_comment_add(request, project_code, task_code): 
    data = dict() 
    project = get_object_or_404(Project, pk=project_code) 
    task = get_object_or_404(Task, pk=task_code) 
    if request.method == 'POST': 
     form = CommentForm(request.POST) 
     if form.is_valid(): 
      comment = form.save(commit=False) 
      comment.author = request.user 
      comment.save() 
      task.comments.add(comment) 
      data['form_is_valid'] = True 
      data['html_task_comment'] = render_to_string('project/task_comment_list.html' {'task': group_task}) 
     else: 
      data['form_is_valid'] = False 
    else: 
     form = CommentForm() 
    context = {'project': project, 'task': task, 'form': form} 
    data['html_task_comment_form'] = render_to_string('project/task_comment_form.html', context, request=request) 
    return JsonResponse(data) 

JS：

// TASK COMMENT ADD 
$(".task-comment-form").submit(function(event) { 
    event.preventDefault(); 
    console.log(event.preventDefault()); 
    var form = $(this); 
    $.ajax({ 
     url: form.attr("action"), 
     data: form.serialize(), 
     type: form.attr("method"), 
     dataType: 'json', 
     success: function (data) { 
      var current_group = form.closest('.custom-list-group'); 
      if (data.form_is_valid) { 
       current_group.find(".task-comments").html(data.html_task_comment); 
      } 
      else { 
       current_group.find(".task-comment-form").html(data.html_task_comment_form); 
      } 
     } 
    }); 
    form[0].reset(); 
    return false; 
}); 

Answer 1

嘗試添加這一項

$.ajaxSetup(
{ 
    headers: 
    { 
     'X-CSRF-Token': $('input[name="_token"]').val() 
    } 
}); 

Answer 2

您沒有設置令牌上的Ajax請求：

https://docs.djangoproject.com/en/1.11/ref/csrf/#setting-the-token-on-the-ajax-request

此的getCookie後添加到您的代碼（ ）電話：

function csrfSafeMethod(method) { 
    // these HTTP methods do not require CSRF protection 
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
} 

$.ajaxSetup({ 
    beforeSend: function(xhr, settings) { 
     if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
      xhr.setRequestHeader("X-CSRFToken", csrftoken); 
     } 
    } 
});