Question

我正在尝试通过我的djano应用程序中的Ajax帖子处理带有文件字段的POST请求。我收到了这个错误：

禁止（CSRF令牌丢失或不正确。）：/ user / instance / create / new / awod /

以下是我的尝试：

来自 template.html

<div class="container" style="background-color: lightgray; opacity: 0.7;margin-top:10%;margin-left: 2%; padding-bottom: 10%;">
          <form method="post" class="form-horizontal" action="" id="gitForm" enctype="multipart/form-data">
          {% csrf_token %}
          <div class="form-group">
          <label class="control-label" for="inputGroupSuccess1">Deployment Name:</label>
             <div class="input-group">
               <span class="input-group-addon">@</span>
               <input type="text" class="form-control" name="name" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
             </div>
          </div>
          <div class="form-group">
              <label class="control-label">Select File</label>
              <input type="file" id="inputGroupSuccess2" name="archive"  class="file" multiple   data-allowed-file-extensions='["zip", "tar"]'>
              <small id="fileHelp" class="form-text control-label" style="color:black">Upload a Tar or Zip archive without a Dockerfile, otherwise your deployment will fail.</small>
          </div>
          <div id="spinner" style="display: none;">
               <div class="f_circleG" id="frotateG_01"></div>
               <div class="f_circleG" id="frotateG_02"></div>
               <div class="f_circleG" id="frotateG_03"></div>
               <div class="f_circleG" id="frotateG_04"></div>
               <div class="f_circleG" id="frotateG_05"></div>
               <div class="f_circleG" id="frotateG_06"></div>
               <div class="f_circleG" id="frotateG_07"></div>
               <div class="f_circleG" id="frotateG_08"></div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-lg pull-right" value="Submit"> Submit </button>
                <span style="padding-right: 5%;float: right;"><a href="{% url 'users:new-instance' %}" class="btn btn-primary btn-lg"><img src="{% static 'images/go-back-arrow.svg' %}" style="width: 24px; height: 24px;"> Go Back! </a></span>
            </div>
          </form>
       </div>
      </div>
    </div>
</div>

我的javascript

<script type="text/javascript">
$(document).ajaxStart(function() {
   $('#spinner').show();
   console.log("ajax start")
});

$(document).ajaxStop(function() {
   $('#spinner').hide();
});
$(document).on('submit', '#gitForm', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url : '/user/instance/create/new/awod/',
        data: {
            name:$('#inputGroupSuccess1').val(),
            archive:$('#inputGroupSuccess2').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
        },
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success:function () {
            $('#message').show();
            $('#inputGroupSuccess1').val('');
            $('#inputGroupSuccess2').val('');

        }
    })
});

即使我在console.log中输入csrf_token字段，它也会正确打印csrf标记。

有什么不对吗？

请帮帮我！提前谢谢！

Answer 1

虽然您可以在数据中传递令牌，但recommended method是设置自定义X-CSRFToken HTTP标头：

$.ajax({
    type: 'POST',
    headers: {'X-CSRFToken': $.cookie('csrftoken')},
    url : '/user/instance/create/new/awod/',
    data: {
        name:$('#inputGroupSuccess1').val(),
        archive:$('#inputGroupSuccess2').val()
    },
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success:function () {
        $('#message').show();
        $('#inputGroupSuccess1').val('');
        $('#inputGroupSuccess2').val('');
    }
})

如您所见，值为csrftoken cookie（由Django设置）。我使用了jQuery.cookie库来检索令牌，但是你可以根据自己的喜好来检索它。

Answer 2

使用async:false通常是一个坏主意，因为它会阻止页面上的其他事件触发您可能不希望您的代码暂停，我建议你可以像这样使用ajax：

$(document).on('submit', '#gitForm', function (e) {
    var form_data = new FormData($(this)[0]);
    $.ajax({
        type:'POST',
        url:'/user/instance/create/new/awod/',
        processData: false,
        contentType: false,
        data : form_data,
        success: function(response) {
          $('#message').show();
          $('#inputGroupSuccess1').val('');
          $('#inputGroupSuccess2').val('');
        }
    });
});

这也应该通过csrf_token来解决您的问题。

在Django中上传Ajax POST文件

2 个答案: