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 Security和你的Cookies的问题。您需要配置中间件。请查看this SO solution和this piece of Django Documentation。

您可以尝试将此添加到您的Ajax调用中，我会将类型更改为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

试试这个，

<select id="mySelect">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
</select>
<button onclick="myFunction()">Try it</button>

<script>
    function myFunction() {
        document.getElementById("mySelect").selectedIndex = "2";
    }
</script>

重点是：

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

Answer 3

谢谢大家的帮助，但我通过调试调度方法得到了解决方案。我发现表单数据丢失意味着请求中存在无效的formdata。 csrf_token没有问题，但在发送到ajax请求的参数中有问题。

目前我使用的是ajax -

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

并在请求中发送此formData（现在我仍然不知道为什么它不在这里工作，而我总是在django中使用这个东西）。我只需用以下代码替换上面的代码。

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

“PUT”请求中的禁止403错误django rest framwork中的Ajax

3 个答案: