CSRF验证失败。 请求中止。 AJAX错误？

Question

I'm trying to use AJAX to send total_time to my backend (which is Django). However, every time I try to post, I get a 403 Error (CSRF verification failed. Request aborted.).

from passage_detail.html:

    $(function() {
        $('#id_user_passage').on('keyup', function (e) {
            if (e.which === 13) {
                var total_time = (new Date()).getTime() - $(this).data('total_time');
                $(this).data('total_time', 0);
                console.log('Time passed : ' + total_time + ' milliseconds');
                $.ajax({
                    url : '/typer/passage_detail/{{ p_slug }}/',
                    type : "POST",
                    data : total_time,
                    processData: false
                });

            } else if (!$(this).data('total_time')) {
                 $(this).data('total_time', (new Date()).getTime());
            }
        });
    });

from views.py: def passage_detail(request, passage_name_slug): print("I am DOING SOMETHING")

    context_dict = {}

    current_passage = get_object_or_404(Passage, slug=passage_name_slug)

    context_dict['passage'] = current_passage
    context_dict['p_name'] = current_passage.name
    context_dict['p_slug'] = current_passage.slug
    context_dict['p_text_body'] = current_passage.text_body
    context_dict['p_wlength'] = current_passage.total_words
    context_dict['p_clength'] = current_passage.total_chars

    if request.method == 'POST':
        print("I am a form")
        form = PassageTestForm(request.POST)

        if form.is_valid():
            print("I am valid")
            user_passage = form.save(commit=False)
            current_user = request.user
            body = user_passage.user_passage
            body_split = re.findall(r'((?:(?<=^\s)\s*)?\S+\s*(?=\s\S|$))', body)
            body_clength = len(body)
            body_wlength = len(body_split)
            errors, accuracy, error_indices, user_nws = checkString.checkWord(current_passage.text_body, user_passage.user_passage)

            user_passage.errors = errors
            user_passage.accuracy = accuracy
            user_passage.total_chars = body_clength
            user_passage.total_words = body_wlength
            user_passage.passage = current_passage
            user_passage.user = current_user
            print(request.POST['total_time'])


            user_passage.save()
            user_id = current_user.id


            return passage_result(request, current_passage.slug)
        else:
            print(form.errors)
    else:
        form = PassageTestForm()

    context_dict['form'] = form

    return render(request, 'typer/passage_detail.html', context_dict)

from urls.py:

urlpatterns = patterns('',
                   url(r'^$', views.index, name='index'),
                   url(r'^passage_detail/(?P<passage_name_slug>[\w\-]+)/$', views.passage_detail, name='passage_detail'),
                   url(r'^passage_result/(?P<passage_name_slug>[\w\-]+)/$', views.passage_result, name='passage_result'),
                   url(r'^add_passage/$', views.add_passage, name='add_passage'),
                   url(r'^register/$', views.register, name='register'),
                   url(r'^login/$', views.user_login, name='login'),
                   url(r'^logout/$', views.user_logout, name='logout'),
                   )

What exactly am I doing wrong? Is my $.ajax url value wrong?

Answer 1

You must send the CSRF token with your post. This is one solution using jquery cookie plugin from Django documents :

$(function () {
    var csrftoken = $.cookie('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);
            }
        }
    });
});