Ajax带烧瓶-seasurf调用

Question

I am developing a small app on localhost and using flask-seasurf to prevent csrf attacks. All my non-ajax forms work correctly with flask-seasurf. I have one form that triggers an ajax call to '/checkajax' on form submit; this worked until I started to use flask-seasurf but now I get a console error and the ajax doesn't work:

Warning in flask_seasurf: Forbidden (CSRF token missing or incorrect): /checkajax 

The form triggering the ajax call has the standard hidden field containing the 'csrf_token()' function call of flask-seasurf embedded in the jinja page template:

<input id="csrf-token" type="hidden" name="_csrf_token" value="{{ csrf_token() }}">

The ajax call structure is:

$("#submit").submit(function(event) {
    event.preventDefault();
    $.ajax({
        url: "/checkajax",
        data: {...},
        type: "POST",
        datatype: "text",
        success: function(response){
            ...
        },
        error: function(response) {
            ...
        }
    });
});

I can see from the site cookie that there is an entry for '_csrf_token' generated by flask-seasurf. Can anyone give some insight as to why this ajax call is now not working?

Answer 1

The solution to my problem was to modify the header of the ajax call to include X-CSRFToken defined as the flask-seasurf token from my form:

var csrf_token = $("csrf-token").val()

$("#submit").submit(function(event) {
    event.preventDefault();
    $.ajax({
        headers: {"X-CSRFToken", csrf_token},
        url: "/checkajax",
        data: {...},
        type: "POST",
        datatype: "text",
        success: function(response){
            ...
        },
        error: function(response) {
            ...
        }
    });
});

Hope that helps someone else.