Flask-WTF结合Fetch提交表单时CSRF令牌不匹配问题求助

问题根源 #

传统表单提交会自动携带Flask-WTF生成的csrf_token隐藏字段，所以validate_on_submit()能正常验证；但用Fetch异步提交时，默认不会自动传递这个Token，当输入有效数据触发后端完整验证流程时，就会触发CSRF不匹配错误（空字段时可能前端拦截或后端字段验证先失败，没走到CSRF校验环节）。

具体解决方案 #

1. 确认模板中正确渲染CSRF Token #

首先保证登录表单模板里包含Flask-WTF自动生成的CSRF隐藏字段：

<form id="login-form">
    {{ form.hidden_tag() }} <!-- 这行代码会自动渲染name为csrf_token的隐藏输入框 -->
    {{ form.email.label }} {{ form.email() }}
    {{ form.password.label }} {{ form.password() }}
    <button type="submit">登录</button>
</form>

可以查看页面源码确认是否生成了类似<input type="hidden" name="csrf_token" value="xxx">的元素。

2. 在Fetch请求中手动携带CSRF Token #

有两种可靠的传递方式：

方式一：通过FormData携带Token

直接利用FormData自动收集表单内的所有字段（包括csrf_token）：

document.getElementById('login-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this); // 自动包含csrf_token字段
    
    try {
        const response = await fetch('/login', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        // 根据返回结果处理页面逻辑，比如提示登录成功/失败
        console.log(result);
    } catch (error) {
        console.error('提交出错:', error);
    }
});

方式二：通过请求头传递Token

如果习惯用JSON格式提交数据，可以从Cookie中取出CSRF Token，放在请求头里：

// 工具函数：从Cookie中获取指定值
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

document.getElementById('login-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    // 手动收集表单数据转成JSON
    const formData = {
        email: document.querySelector('#email').value,
        password: document.querySelector('#password').value
    };
    
    const csrfToken = getCookie('csrf_token');
    
    try {
        const response = await fetch('/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify(formData)
        });
        
        const result = await response.json();
        console.log(result);
    } catch (error) {
        console.error('提交出错:', error);
    }
});

3. 后端适配验证逻辑 #

如果用请求头传递Token，需要后端手动验证；如果用FormData传递，直接用validate_on_submit()即可：

适配请求头传递的后端代码

from flask import request, jsonify
from flask_wtf.csrf import validate_csrf
from your_app import app, LoginForm

@app.route('/login', methods=['POST'])
def login():
    form = LoginForm()
    
    # 验证请求头中的CSRF Token
    try:
        validate_csrf(request.headers.get('X-CSRFToken'))
    except:
        return jsonify({'error': 'CSRF Token不匹配'}), 400
    
    if form.validate():
        # 处理登录逻辑，比如校验用户密码
        return jsonify({'success': True, 'msg': '登录成功'})
    else:
        return jsonify({'error': form.errors}), 400

适配FormData传递的后端代码

直接保留原有的validate_on_submit()逻辑即可：

from flask import request, jsonify
from your_app import app, LoginForm

@app.route('/login', methods=['POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        # 处理登录逻辑
        return jsonify({'success': True, 'msg': '登录成功'})
    else:
        return jsonify({'error': form.errors}), 400

排查小技巧 #

• 打开浏览器开发者工具的Network面板，查看POST请求的FormData或请求头，确认是否携带了CSRF Token。
• 检查Application->Cookies中是否存在csrf_token（Flask-WTF默认会将Token存在Cookie中）。

内容的提问来源于stack exchange，提问作者Kevin Mahendra