Reactjs 使用烧瓶/WT形成和反应的CSRF保护

是否有人成功地对随React（作为受控组件）提交到烧瓶后端的表单（理想情况下为WTForms）实施CSRF保护？我看过很多部分答案，还有一个是关于Django的，但找不到任何关于Flask的明确答案。我最大的问题似乎是，我不知道如何将csrf令牌发送到我的react前端，在提交表单之前将其存储为一个标题，然后使用正确的令牌提交表单。任何方向都会很有帮助。

也许你也需要安全性

---

因此，基本上我所做的是在Flask中设置一个路由，可以接收GET和POST请求。当组件挂载时，React发送一个GET请求，Flask使用csrf令牌作为头进行响应（手动完成）。然后React将该值存储在状态中。提交表单时，来自state的csrf令牌作为字段发送，类似于在纯Flask应用程序中发送的方式，在纯Flask应用程序中，它将是一个隐藏字段。虽然这在技术上可行，但我很好奇这是否仍然容易受到CSRF的影响。我认为下一个最好的选择是在所有端点上设置CSRF保护，因此如果这不安全，可以尝试这样做

烧瓶路线：

@app.route('/api/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    print(request.method)
    if request.method == 'GET':
        return ('', {'csrf_token': form.csrf_token._value()})
    elif form.validate_on_submit():
        return { 'message': 'Login successful' }, 200
    else:
        return { 'errors': form.errors }

在componentDidMount中获取请求：

componentDidMount() {
  axios.get('/api/login',{data: null, headers: {'Content-Type': 'application/json'}})
  .then(res => {
    console.log(res)
    this.setState({
      csrf: res.headers.csrf_token
    });
  }) 
}

提交表格时提交申请：

onSubmitLogin = e => {
  e.preventDefault();
  const userData = {
    username: this.state.username,
    password: this.state.password,
    csrf_token: this.state.csrf
  };
  axios({
    method: 'post',
    url: '/api/login',
    data: userData,
    headers: {
      'content-type': 'application/json'
    }
  })
  .then(res => {
    console.log(res);
  });
}

---

我正在尝试做一些类似的事情，比如创建一个登录和一个注册路径，请分享一些关于表单在react中的外观的通用代码片段。先谢谢你。