【React】React+Expressの構成でpostを実行する

構成

ReactのApp.tsxからnode+expressで作っている、バックエンドにpostをするイメージです。
バックエンドはMySQLと繋がっています。

コード

App.tsx

  const App = async () => {
    try {
      await axios.post("http://localhost:3100/api", {
        date: "2023/02/07",
        id: 1,
        name: "name",
      });
    } catch (error) {
      console.error("error=" + error);
    }
  };

index.ts

const express = require("express");
const cors = require("cors");
const app = express();
const mysql = require("mysql2");
require("dotenv").config();

const connection = mysql.createConnection({
  host: process.env.ENDPOINT,
  user: process.env.NAME,
  password: process.env.PASSWORD,
  database: process.env.DBNAME,
});

app.use(express.json()); // for parsing application/json
app.use(express.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

app.post("/api", (req: any, res: any) => {
  const { date, seat_id, integrated_id } = req.body;
  console.log(date);//2023/02/07
  console.log(id);//1
  console.log(name);//name

  const insertQuery = `INSERT INTO ${process.env.DBNAME}.${process.env.DBTABLE} (date, id, name) VALUES ("${date}",${id}, "${name}");`;

  connection.query(insertQuery, (error: any, results: any) => {
    if (error) {
      throw error;
    }
    res.status(201).send(`added`);
  });
});

app.listen(3100, () => {
  console.log("Server port 3100 started!");
});

フロントエンドはnpm start、バックエンドはtsnode index.tsで起動しています。
index.ts内では

index.ts

app.use(express.json()); // for parsing application/json
app.use(express.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

を追加しないとうまく動きませんでした。