Django的 - CSRF令牌沒有定義

Question

這段代碼是應該做的是讓用戶單擊他們的描述，並能對其進行編輯。我有模態彈出，但保存按鈕將不保存數據併產生以下錯誤：

Uncaught ReferenceError: csrftoken is not defined 
at HTMLButtonElement.<anonymous> (modalShortListDescription.js:6) 
at HTMLButtonElement.dispatch (jquery.min.js:3) 
at HTMLButtonElement.r.handle (jquery.min.js:3) 

這裏的地方的模式被稱爲：

<div class="tab-content col-xs-12"> 
{% for list in lists %} 
    <input type="hidden" id="idList" id_list="{{list.id}}"> 
    {% if forloop.first and not createTabActive %} 
    <div role="tabpanel" class="tab-pane fade active in" id="list{{list.id}}"> 
    {% else %} 
    <div role="tabpanel" class="tab-pane fade" id="list{{list.id}}"> 
    {% endif %} 
     <div class="content col-xs-12"> 
      <div class="form-horizontal sort-by col-xs-12"> 
       <h3>Description</h3> 
        {% if list.description %} 
         <a href="#" data-toggle="modal" data-target="#modalDescription{{list.id}}" id="editDescription">{{list.description}}</a> 
        {% else %} 
         <a href="#" data-toggle="modal" data-target="#modalDescription{{list.id}}">None</a> 
        {% endif %} 
       {% include "layout/popUp/modal-short-list-description.html" %} 
       </div> 

下面是模式本身：

<div class="modal fade" id="modalDescription{{list.id}}" role="dialog"> 
    <div class="modal-dialog"> 
    <form class="form-horizontal" action="{% url 'update-list-description' %}" method="post"> 
    {% csrf_token %} 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Description</h4> 
     </div> 
     <div class="modal-body modal-body-exper modal-body-value modal-body-t"> 
      <div class="lineEnterValue lineTeamSize lineTitle"> 
       <div class="form-group {% if form.description.errors %} has-error{% elif form.is_bound %} has-success{% endif %}"> 
         <div class="col-sm-10"> 
          <textarea name="{{ form.description.html_name }}" class="form-control" id="{{ form.description.id_for_label }}" rows="5" style="margin: 0px; height: 90px; width: 455px;"></textarea> 
         </div> 
         {% if form.description.errors %} 
         <ul class="col-sm-10 col-sm-offset-2 error-list text-danger"> 
         {% for error in form.description.errors %} 
          <li>{{ error|escape }}</li> 
         {% endfor %} 
         </ul> 
         {% endif %} 
        </div> 
      </div> 
     </div> 
     <div class="modal-footer modal-footer-value"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
     <button type="submit" class="btn btn-primary" id="description_save">Save</button> 
    </div> 
    </div> 
</form> 
</div> 

這裏是保存按鈕使用的.js：

$(document).ready(function() { 
    $("#description_save").click(function() { 
     var description = $("#form.description").val(); 
     var idList = $("#idList").attr("id_list"); 
     var url = "/bid/update-list-description"; 
     csrftoken(); 
     $.ajax({ 
      type: "POST", 
      url: url, 
      data: {description : description, idList: idList}, 
     }).done(function(response){ 
      $(".modalDescription").modal("hide"); 
      $(".editDescription").text(description); 
     }); 
    }) 
}) 

編輯： views.py：

@csrf_protect 
def updateListDescription(request): 
    checkEmployer(request) 
    pageClass="my-short-lists search-for-prospect" 

    #shortList = get_object_or_404(List, id = request.POST.get("idList")) 
    shortList = request.user.profile.profile_employers.employer_lists.filter(pk=request.POST.get("idList")) 

    if request.method =="POST": 
     form = ListForm(request.POST) 
     if form.is_valid(): 
      shortList.description = form.cleaned_data["description"] 
      shortList.save() 
    else: 
     form = ListForm() 

    return redirect('my-short-lists') 

Answer 1

的AJAX POST不包括csrf_token。地址：

'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val() 

到$就數據（使用說明和IDLIST一起），並刪除csrftoken（）。

Answer 2

編輯您的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; 
} 

$(document).ready(function() { 
    $("#description_save").click(function() { 
     var description = $("#form.description").val(); 
     var idList = $("#idList").attr("id_list"); 
     var url = "/bid/update-list-description"; 
     var csrftoken = getCookie('csrftoken'); 
     $.ajax({ 
      type: "POST", 
      url: url, 
      data: {description : description, 
        idList: idList, 
        csrfmiddlewaretoken: csrf_token 
      }, 
     }).done(function(response){ 
      $(".modalDescription").modal("hide"); 
      $(".editDescription").text(description); 
     }); 
    }) 
}) 

Answer 3

編輯：

我認爲問題在於不僅csrftoken，而且在按鍵：如果一個按鈕調用AJAX，它不應該是submit。如果它張貼表單，它不應該做ajax調用。看起來你在表單中添加了令牌，但是ajax首先做了他的事情......所以第一個答案似乎是有效的。

或者，

可以代替$.ajaxSetup()添加頁眉每一個AJAX調用。 DOC有這部分說明：

1. 定義getCookie(name)方法;
2. 定義var csrftoken = getCookie('csrftoken');;
3. 使用這些行：

即：

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); 
     } 
    } 
}); 

那麼你沒有改變任何Ajax調用。標題附在每個Ajax調用中。

https://docs.djangoproject.com/en/2.0/ref/csrf/，在「Ajax」部分下。

我已經使用這個方法和它的工作。