FlaskWTF如何将CSRF令牌发送到Vue前端_如何将数据从html (Django后台)发送到js (Vue前端)_如何将mp3文件从Java后台发送到前端，并在Vue.js前端播放 - 腾讯云开发者社区

Flask-WTF是一个用于在Flask应用程序中处理Web表单的扩展。它提供了一种简单的方式来生成表单、验证用户输入并防止跨站请求伪造（CSRF）攻击。

要将CSRF令牌发送到Vue前端，可以按照以下步骤进行操作：

在Flask应用程序中安装和配置Flask-WTF扩展。可以使用pip命令安装Flask-WTF：pip install Flask-WTF。然后在Flask应用程序的配置中添加一个密钥，用于生成CSRF令牌。例如：

app.config['SECRET_KEY'] = 'your_secret_key'

在Flask应用程序的路由中创建一个表单，并在表单中添加一个隐藏字段来存储CSRF令牌。例如：

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    submit = SubmitField('Submit')

在Flask应用程序的路由中，使用render_template函数将表单渲染到Vue前端。在渲染表单时，可以使用form.hidden_tag()方法来生成包含CSRF令牌的隐藏字段。例如：

from flask import render_template

@app.route('/form')
def form():
    my_form = MyForm()
    return render_template('form.html', form=my_form)

在Vue前端中，使用axios或其他HTTP库向Flask应用程序发送POST请求时，需要在请求头中包含CSRF令牌。可以通过在Vue组件中获取CSRF令牌，并将其添加到请求头中的方式来实现。例如：

import axios from 'axios';

const csrfToken = document.querySelector('meta[name=csrf-token]').content;

axios.defaults.headers.common['X-CSRFToken'] = csrfToken;

// 发送POST请求
axios.post('/api/endpoint', data)
    .then(response => {
        // 处理响应
    })
    .catch(error => {
        // 处理错误
    });

需要注意的是，上述代码中的/api/endpoint应该替换为实际的后端API端点。

总结： Flask-WTF可以帮助我们在Flask应用程序中处理Web表单，并提供了防止CSRF攻击的功能。要将CSRF令牌发送到Vue前端，需要在Flask应用程序中配置Flask-WTF，并在表单中添加隐藏字段来存储CSRF令牌。然后，在Vue前端中获取CSRF令牌，并将其添加到请求头中发送给Flask应用程序。这样可以确保请求的安全性和完整性。