CSRFの確認に失敗しました。 Django形式でリクエストが中止されました

Question

私は画像アップロードフォームを作成中です。ユーザーが画像をアップロードするとき。プレビューエリアにajaxを含む画像を表示する...フォームがリロードされますが、新しいアバターを表示したくないようです。そしてCSRF verification failed. Request abortedエラーが発生します。

Reason given for failure: CSRF is missing or incorrect.

私は、フォーム内の場所でcsrf_tokenを持っています。

テンプレート：

<form class="nice inline-form" enctype="multipart/form-data" method="POST" action="/profile/edit/" id="avatarLoadForm"> 
     <input type="hidden" name="next" value="/account/settings/"> 
     {% csrf_token %} 
     <div> 
     <label for="avatar">Avatar</label> 
     <div id="preview" class="frame"> 
      <img src="{% if profile.user %}{% thumbnail profile.avatar 120x120 crop %}{% else %}{{ DEFAULT_AVATAR }}{% endif %}" alt="" alt="sample-pic" id="thumb" /> 
     </div> 
     <input type="file" size="20" id="imageUpload"> 
     and other form info... 
</form> 

のAjax/jQueryの：

$(document).ready(function(){ 

     var thumb = $('img#thumb'); 

     new AjaxUpload('imageUpload', { 
      action: $('#avatarLoadForm').attr('action'), 
      name: 'avatar', 
      csrfmiddlewaretoken: $("#csrfmiddlewaretoken").val(), 

      onSubmit: function(file, extension) { 
       $('#preview').addClass('loading'); 
      }, 
      onComplete: function(file, response) { 
       thumb.load(function(){ 
        $('#preview').removeClass('loading'); 
        thumb.unbind(); 
       }); 
       thumb.attr('src', response); 

      } 

     }); 

たぶん私は私のViews.pyに欠けている何かがありますか？

@login_required   
def edit_profile(request): 
    context = base_context(request) 
    if request.method == 'POST': 
     notify = "You have successfully updated your profile." 
     user_info_form = UserInfoForm(request.POST, request.FILES) 
     if user_info_form.is_valid(): 
      if request.is_ajax(): 
       response = simplejson.dumps({"status": "Upload Success"}) 
       return HttpResponse (response, mimetype='application/json') 
      messages.success(request, 'You have successfully updated your profile.') 
      user_info_form.save(request.user, profile_type) 
      return HttpResponseRedirect(request.POST.get('next', '/profile/' + request.user.username + '/')) 
    else: 
     initial = {} 
     initial['first_name'] = request.user.first_name 
     initial['last_name'] = request.user.last_name 
     initial['email'] = request.user.email 
     initial['about'] = profile.about 
     initial['country'] = profile.country 
     initial['about'] = profile.about 
     user_info_form = UserInfoForm(initial=initial) 
    context['user_info_form'] = user_info_form 
    context['profile'] = profile 
    return render_to_response('settings/profile.html', context, context_instance=RequestContext(request)) 

Settings.py：

MIDDLEWARE_CLASSES = (
    'django.middleware.common.CommonMiddleware', 
    'django.contrib.sessions.middleware.SessionMiddleware', 
    'django.middleware.csrf.CsrfViewMiddleware', 
    'django.middleware.csrf.CsrfResponseMiddleware', 
    'django.contrib.auth.middleware.AuthenticationMiddleware', 
    'django.contrib.messages.middleware.MessageMiddleware', 
    'pagination.middleware.PaginationMiddleware', 
) 

ファイルのアップロードがAJAXのがらくたなしで動作します。つまり、実際には画像を保存し、プレビューには表示されません。私は本当に何が間違っているのか、なぜこれが起きているのか分かりません。 csrfの失敗に関する投稿がたくさんありました。しかし、私はこの状況に関係するものを見つけることができません。どんな洞察も非常に高く評価されるだろう。

Answer 1

csrfmiddlewaretoken: $("#csrfmiddlewaretoken").val(), 

これはおそらく動作しません。 CSRFフィールドの名前/ idは動的に生成され、このような静的な文字列ではありません。

AJAXリクエストでCSRFミドルウェアを正しく使用する方法については、https://docs.djangoproject.com/en/1.3/ref/contrib/csrf/#ajaxを参照してください。

Answer 2

csrfトークンにはIDが#csrfmiddlewaretokenと表示されると思いますか？レンダリングされたHTMLを簡単に見てみると、テンプレートタグはid属性を生成しません。

ではなく

Answer 3

が見る$("input[name=csrfmiddlewaretoken]").val()を試してみてください。このhttp://djangolinks.com/detail/ajax-post-requests-csrf-fix-69/

Answer 4

これは私のために動作します。また

beforeSend: function(jqXHR, settings) { 
    jqXHR.setRequestHeader('X-CSRFToken', $('input[name=csrfmiddlewaretoken]').val()); 
}, 

、あなたのフォームがある場合、あなたは偉大であるので、同様に、DOMの外にクッキーを抽出できajax経由で生成され、レンダリングの方法で{{csrf_token}}を送信できません：

beforeSend: function(xhr, settings) { 
     console.log('-------------before send--'); 
     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; 
     } 
     if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) { 
      // Only send the token to relative URLs i.e. locally. 
      xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); 
     } 
}