djangoでのAjax POSTファイルのアップロード

Question

私のdjanoアプリケーションでAjaxポストを介してファイルフィールドでPOSTリクエストを処理しようとしています。 私はこのエラーを取得しています：

Forbidden (CSRF token missing or incorrect.): /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クッキーです。私はトークンを取得するためにjQuery.cookieライブラリを使用しましたが、好きだがそれを取得することはできます。

Answer 2

それはあなたを発射からページ上の他のイベントを防止しますので、おそらくあなたのコードが一時停止したくない、私はこのようなAJAXを使用するためにあなたをお勧めしたいasync:falseを使用するgenerely悪い考えです：

$(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で問題を解決する必要があります。