使用ajax和djangorestframework 403错误通过django表单发送文件答案

【问题标题】：Sending file through django form using ajax and djangorestframework 403 error使用ajax和djangorestframework 403错误通过django表单发送文件
【发布时间】：2017-08-28 17:10:06
【问题描述】：

我正在尝试使用 ajax 从 django 模板表单发送 pdf 文件，并使用 djangorestframwork 在views.py 中获取数据。适用于普通数据，但在这种情况下我得到 403 错误

forms.py

class TicketForm(forms.ModelForm):
    class Meta:
        model = Ticket
        fields = ('upload',)
        widgets = {
            'upload': forms.FileInput(
                attrs={'id': 'fileinput', 'required': True, 'placeholder': 'Say something...'}
            ),
        }

模板和 jQuery/js：

 <form method="post" enctype="multipart/form-data" class="pdf_form">
{% csrf_token %}
            {{ form.as_p }}


      <input type="submit" class="">Save</input>
  </form>




 <script type="text/javascript">

 $(function() {

function upload() {
   alert($('#fileinput').val())

   $.ajax({
        url: '/upload_ticket/',
        type : "POST", // http method
        dataType: 'json',
        data : { 'file' : $('#fileinput').val() }, // data sent with the post request

        // handle a successful response
        success : function() {
          alert('succes');
        },

        // handle a non-successful response
        error : function() {
           alert('error');
        }
    });
};






    $('.pdf_form').on('submit', function(e){
    e.preventDefault();
    alert('it works!');
    console.log("form submitted!")  // sanity check
    upload();
});



});

</script>

urls.py:

    url(r'^upload_ticket/$', views.upload_ticket),

views.py：

@api_view(['POST', ])
def upload_ticket(request):
    return Response(request.data)

我已经调试了几个小时，但找不到错误。我的实施有什么问题？

POST /upload_ticket/ HTTP/1.1" 403 58

【问题讨论】：

我相信您可能需要在您的 ajax 数据字典中传递 csrfmiddlewaretoken: "{{ csrf_token }}"。
@jape 是的。我不知道 djangp 在以这种方式发送数据时提供了针对 csrf 的保护
我很高兴你至少修好了它！祝你好运:)

标签： jquery python ajax django django-rest-framework

【解决方案1】：

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

在 jQuery 库之后添加，它总是将 csrftoken 传递给您的请求，您不再需要手动传递 csrftoken 了！

【讨论】：

docs.djangoproject.com/en/2.0/ref/csrf/…

【解决方案2】：

由于您没有在请求中发送 csrf 令牌，因此发生 403 错误，

您必须将 csrf 令牌设置为您的请求标头，您可以使用 code 并在您的 js 文件或 js 块的末尾，一切都应该没问题。

另外我想向你推荐这个关于 django/和 ajax 的 post，对我一开始非常有用

【讨论】：

【解决方案3】：

您没有在 API 调用中发送 csrf 令牌，这就是罪魁祸首。这应该适合你。

  $.ajax({
    url: '/upload_ticket/',
    type : "POST", // http method
    dataType: 'json',
    data : { 'file' : $('#fileinput').val(), 'csrfmiddlewaretoken' : document.getElementsByName('csrfmiddlewaretoken')[0].value }, // data sent with the post request

    // handle a successful response
    success : function() {
      alert('succes');
    },

    // handle a non-successful response
    error : function() {
       alert('error');
    }
});

};

【讨论】：