Реагировать + PostgreSQL + Node.js вставка значения флажка в базу данных

Question

Я впервые пытаюсь вставить значения флажка в базу данных, используя React, PostgreSQL и Node.js. Мне трудно разобраться с серверной частью и структурировать, как это будет работать.

В терминале я получаю следующую ошибку: «ForbiddenError: неверный токен csrf» (с которым я сталкивался пару раз и исправлял путем очистки файлов cookie и повторного входа в систему) и на консоли : "POST http://localhost: 8080 / voiceforfiji 403 (Запрещено)" плюс улов от фрагмента catch моего почтового маршрута.

Любой, кто делал это раньше, будет в состоянии объяснить, как это должно быть сделано? Вот что я пробовал до сих пор:

таблица. sql

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

дБ. 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 route

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