Javascript 反应+；PostgreSQL+；Node.js在数据库中插入复选框值

我第一次尝试使用React、PostgreSQL和Node.js在数据库中插入复选框的值。我很难处理它的后端部分，也很难构建它的工作方式

在终端上，我得到以下错误：“禁止错误：无效的csrf令牌”（我之前遇到过几次，并通过清理cookies和再次登录来修复），在控制台上，从我的POST路由的Catch块中得到：“POST 403（禁止）”加上一个Catch

这里有谁曾经做过这件事，并且能够解释应该如何做？以下是我迄今为止所尝试的：

table.sql

CREATE TABLE fiji(
    id SERIAL PRIMARY KEY,
    vote BOOLEAN DEFAULT FALSE NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
); 

db.js

exports.addVoteForFiji = function(vote_for_fiji) {
  return db
    .query(
      `INSERT INTO fiji (vote_for_fiji)
    VALUES ($1)`,
      [vote_for_fiji]
    )
    .then(data => {
      return data.rows;
    });
};

index.js路由

app.post("/voteforfiji", (req, res) => {
  let body = req.body;
  db.addVoteForFiji(req.session.userId, body.vote_for_fiji)
    .then(data => {
      console.log(data);
      res.json({ success: true });
    })
    .catch(error => {
      console.error(error);
      res.json({
        success: false
      });
    });
});

honeymoon.js反应组件

import React from "react";
import { Link } from "react-router-dom";
import axios from "axios";

export default class Honeymoon extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      error: false,
      vote: "VOTE . ",
      votar: "VOTAR . ",
      stimmen: "STIMMEN ",
      checked: false
    };

    this.changeMessage = this.changeMessage.bind(this);
  }

  changeMessage(event) {
    event.preventDefault();
    axios
      .post("/voteforfiji", this.state)
      .then(res => {
        console.log("res from axios.post/addinfo", res);
        this.setState({
          vote: "THANK YOU!    ",
          votar: "OBRIGADO!    ",
          stimmen: "DANKESCHÖN!",
          checked: true
        });
      })
      .catch(error => {
        console.error("error in honeymoon:", error);
      });
  }

  render() {
    const home = <img src="home.png" />;
    const mail = <img src="mail.png" />;

    function AllOtherComponentsMenu() {
      return (
        <nav className="header-on-app">
          <button>
            <Link to="/">{home}</Link>
          </button>
          <button>{mail}</button>
          <button className="logout-btn">
            <a href="/logout">Logout</a>
          </button>
        </nav>
      );
    }

    return (
      <div className="honeymoon-container">
        <AllOtherComponentsMenu />

        <h1 className="title-all-pages">Kathi & Rodolfo</h1>
        <h2 className="subtitle-all-pages">
          <span>_______</span> Honeymoon . Lua de Mel . Hochzeitsreise
          <span>_______</span>
        </h2>
        {this.state.error && <h2>Ops! Something went wrong.</h2>}

        <h2 className="honeymoon-subtitle">
          It is no secret: we love travelling! Help us to decide if we&apos;re
          going to Fiji or Patagonia for our Honeymoon.
        </h2>
        <h2 className="honeymoon-subtitle">
          Não é nenhum segredo que nós adoramos viajar! Nos ajude a decidir se
          iremos de Lua de Mel para Fiji ou para Patagônia.
        </h2>
        <h2 className="honeymoon-subtitle">
          Es ist kein Geheimnis: Wir lieben es zu reisen! Entscheide mit, ob wir
          nach Fiji oder Patagonien reisen werden.
        </h2>

        <div className="grid-container-honeymoon">

          <div className="pool-box">
            <h2>YOU DECIDE . VOCÊ DECIDE . DU BESCHLIESST</h2>
            <p>
              It&apos;s time to vote! The votes are secret and we can&apos;t
              tell what your choice was. We will find out what&apos;s our
              destination on the wedding day, together with you!
            </p>
            <p>
              É hora de votar! Os votos são secretos e nós não sabemos qual foi
              a sua escolha. E nós vamos descobrir nosso destino no dia do
              casamento, junto com vocês!
            </p>
            <p>
              Es ist an der Zeit, abzustimmen! Eure Stimmen sind geheim und wir
              können Eure Entscheidungen nicht einsehen. Wir finden dann an
              unserem Hochzeitstage mit Euch zusammen heraus, wohin die Reise
              geht!
            </p>
            <br />

            <form method="post">
              <input type="checkbox" id="fiji" name="vote_for_fiji" />
              <label className="honeymoon-label" htmlFor="fiji">
                Fiji Islands / Ilhas Fiji / Fiji Inseln
              </label>
              <br />
              <button onClick={this.changeMessage} className="pool-btn">
                {this.state.vote} {this.state.votar}
                {this.state.stimmen}
              </button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

从“React”导入React；
从“react router dom”导入{Link}；
从“axios”导入axios；
导出默认类蜜月扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
错误：false，
投票：“投票。”，
votar：“votar.”，
史汀曼：“史汀曼”，
勾选：假
};
this.changeMessage=this.changeMessage.bind（this）；
}
更改消息（事件）{
event.preventDefault（）；
axios
.post（“/voteforfiji”，此.state）
。然后（res=>{
console.log（“来自axios.post/addinfo的res”，res）；
这是我的国家({
投票：“谢谢！”，
votar：“OBRIGADO！”，
史提曼：“丹克什恩！”，
核对：正确
});
})
.catch（错误=>{
console.error（“蜜月中的错误：”，error）；
});
}
render（）{
常数home=；
常量邮件=；
函数AllocherComponentMenu（）{
返回(
{home}
{mail}
);
}
返回(
凯西与鲁道夫
_______蜜月，美尔之旅，霍奇泽特之旅
_______
{this.state.error&&Ops！出了问题。}
这并不是什么秘密：我们热爱旅行！帮助我们决定是否旅行
去斐济或巴塔哥尼亚度蜜月。
Nãnenhum segredo que Nós adoramos viajar！不，我要做决定
斐济和帕塔哥尼亚的海洋研究所。
这是kein Geheimnis：lieben和zu reisen！在麻省理工学院，ob-Wir
斐济南部奥德巴塔哥尼亚莱森沃登。
你决定，你决定，你决定

该投票了！投票是秘密的，我们不能
告诉我们你的选择是什么。我们会找出我们的选择
婚礼当天的目的地，和你在一起！


Éhora de votar！votos são secretos e nós não sabemos qual foi
这是一个很好的选择。我们的目标是什么
卡萨门托，朱托·科姆！


这是一个时代，我们的时代！我们的时代是永恒的
你的工作没有进展，你的工作进展如何
我是祖萨曼·赫拉乌斯，我是赖斯
格特！



斐济群岛/伊尔哈斯斐济/斐济Inseln


{this.state.vote}{this.state.votar}
{this.state.stimmen}
);
}
}

当前代码有什么问题？您可以将您面临的问题包括在内。谢谢@cbr，我没有“我甚至没有意识到我的问题表达得很糟糕。完成！希望现在已经清楚：）错误表明您正在使用一些CSRF中间件。也许

csurf

？如果您正在使用它，则需要提供它提供的CSRF令牌。看看它的文档。顺便说一下，您的SQL有一个错误，它应该是

插入斐济（投票）

，而不是

插入斐济（投票斐济）

，根据您的模式。令牌工作正常。当我添加这条路线时，它才开始出错。感谢您在我的SQL上指出错误！嗯，你们还有其他邮路吗

csurf

忽略GET、HEAD和OPTIONS请求。