CSRF驗證失敗。 請求以Django格式中止

Question

我正在處理圖片上傳表單。 當用戶上傳圖像時。 在預覽區域中使用ajax顯示該圖像...表單重新加載但似乎不想顯示新的頭像。 我的CSRF verification failed. Request aborted 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>

阿賈克斯/ 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

是什么讓你認為csrf令牌有一個id #csrfmiddlewaretoken ？ 快速查看渲染的html會發現模板標記不會生成id屬性。

嘗試$("input[name=csrfmiddlewaretoken]").val()代替

Answer 2

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

這可能行不通。 CSRF字段的名稱/ id是動態生成的，不是像這樣的靜態字符串。

有關如何正確使用帶有AJAX請求的CSRF中間件，請參閱https://docs.djangoproject.com/en/1.3/ref/contrib/csrf/#ajax 。

Answer 3

看到這個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中提取cookie，如果您的表單是通過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'));
        }
}