Django Rest Framwork中的“ PUT”請求Ajax中禁止403錯誤

Question

我正在使用django-rest框架，同時發送put ajax請求被禁止錯誤403。

user-details.html

   <form action="{% url 'user-detail' pk=object.pk %}" id="use1">
        {% csrf_token %}
        {% for key,value in serializer.items %}
             {{key}} <input value="{{value}}" type="text" class="form-control" /><br>
        {% endfor %}

        <button class="btn btn-warning edit_record" type="button" >Update</button>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal">Delete</button>
    </form>

當我單擊更新按鈕時，ajax將被調用，在這里，我得到了帶有隱藏字段csrftoken和其他參數的formdata，但是在運行此ajax之后，我得到了403禁止錯誤，但是“ DELETE”方法在這里正常工作。

據我所知，當csrftoken丟失但我的表單中有csrf_token時，我們會收到此錯誤。

$(".edit_record").on("click",function() {
        var url = document.location.pathname
        form = $(this).closest("form")[0],
        formData = new FormData(form);
         $.ajax({
             type:'PUT',
             url: url,
             data: formData,
             success: function (data) {

            },
              headers: {'X_METHODOVERRIDE': 'PUT'},

         });
    });

我在views.py中使用了ModelViewset

 class UserViewSet(viewsets.ModelViewSet):
        queryset = User.objects.all()
        serializer_class = UserProfileSerializer

        def update(self, request, *args, **kwargs): 
            import pdb;pdb.set_trace() 
            response = super(UserViewSet, self).update(request, *args, **kwargs)
            success =  True if response.status_code in [200,201] else False
            return Response({'object':response.data, 'success':success})

        def partial_update(self, request, *args, **kwargs):
            import pdb;pdb.set_trace()

        def destroy(self, request,*args, **kwargs):   
            response = super(UserViewSet, self).destroy(request, *args, **kwargs)
            success =  True if response.status_code == 204 else False
            return Response({'data':success})

Answer 1

我認為Django安全性和Cookie存在問題。 您需要配置中間件。 請看一下這個SO解決方案和Django文檔 。

您可以嘗試將其添加到Ajax Call中，然后將類型更改為POST而不是PUT。

$.ajaxSetup({
  data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
  type: "POST",
  ..... 
 });

對我有用的是將其實現到我的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');
function csrfSafeMethod(method) {
   return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
       if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
           xhr.setRequestHeader("X-CSRFToken", csrftoken);
     }
  }
});

Answer 2

嘗試這個，

    $.ajax({
        type:"DELETE",
        data:{},
        url:"{{ category_update }}",
        beforeSend:function(xhr){
            xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
        },
        success:function(data,textStatus){
            location.replace(location.href);
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
           document.write(XMLHttpRequest.responseText);
        }
    });

重點是 ：

beforeSend:function(xhr){
     xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
},

Answer 3

謝謝大家的幫助，但我通過調試dispatch方法獲得了解決方案。在這里，我發現表單數據丟失，這意味着請求中存在無效的formdata。 沒有問題csrf_token，但是發送給ajax請求的參數問題。

在我目前使用的ajax中-

    form = $(this).closest("form")[0],
    formData = new FormData(form);

並在請求中發送此formData（現在我仍然不知道為什么它在我一直在django中一直使用時不起作用）。我只是用以下代碼替換了上面的代碼。

   form = $(this).closest("form"),            
   formData  = form.serialize()