使用烧瓶海浪进行 Ajax 调用答案

【问题标题】：Ajax call with flask-seasurf使用烧瓶海浪进行 Ajax 调用
【发布时间】：2020-04-27 05:57:47
【问题描述】：

我正在 localhost 上开发一个小应用程序，并使用 flask-seasurf 来防止 csrf 攻击。我所有的非 ajax 表单都可以在 flask-seasurf 中正常工作。我有一个表单在表单提交时触发对“/ checkajax”的ajax调用；这一直有效，直到我开始使用 flask-seasurf 但现在我收到控制台错误并且 ajax 不起作用：

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

触发ajax调用的表单有标准的隐藏字段，包含flask-seasurf的'csrf_token()'函数调用，嵌入到jinja页面模板中：

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

ajax调用结构为：

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

我可以从站点 cookie 中看到，flask-seasurf 生成了一个“_csrf_token”条目。谁能提供一些关于为什么这个 ajax 调用现在不起作用的见解？

【问题讨论】：

标签： ajax flask csrf

【解决方案1】：

我的问题的解决方案是修改 ajax 调用的标头以包含 X-CSRFToken 定义为我的表单中的 flask-seasurf 令牌：

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) {
            ...
        }
    });
});

希望对其他人有所帮助。

【讨论】：