反应POST提取请求抛出TypeError

Question

I'm learning how to connect a React router app to a MySQL database. It has fetch requests that were all working (using JSON files) before I connected to the database. After connecting to the db, the requests work - including post, but post is throwing an error 'TypeError: Failed to fetch'.

It's also showing a warning in Network>Headers, 'Provisional headers are shown." Also, the alert I set in a client component pops up but when I click 'ok' on it, the post request goes through, I get status code 200, and the data records in the db. When I remove the alert, the request doesn't work at all.

Is there anything in the code below that looks off? How can I debug further?

client component:

import React, { Component } from 'react';

class NewChirp extends Component {
    constructor() {
        super();
        this.state = {
            user: "",
            text: ""
        }
        this.fetchChirps = this.fetchChirps.bind(this)
        this.inputHandler = this.inputHandler.bind(this)
    }

    inputHandler(e) {
        this.setState({ [e.target.name]: e.target.value })
    }

    fetchChirps() {
        fetch('http://127.0.0.1:3000/api/chirps/', {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                user: this.state.user,
                text: this.state.text,
            })
        })
            .catch(err => {
                alert("Error: Your chirp was not created");
                console.log(err)
            })
    }

    render() {
        return (
            <div>
                <div className="input">
                <form action="">
                    <input
                        type="text"
                        placeholder="UserName"
                        size="10"
                        id="user"
                        name="user"
                        onChange={this.inputHandler}
                        defaultValue={this.state.user}
                    />
                    <input
                        type="text"
                        placeholder="Type a new chirp"
                        size="60"
                        id="text"
                        name="text"
                        onChange={this.inputHandler}
                        defaultValue={this.state.text}
                    />
                    <button
                        onClick={this.fetchChirps}
                        id="submit">
                        Submit
                    </button>
                </form>
                </div>
            </div >
        )
    }
}
export default NewChirp;

route in server:

import { Router } from 'express';
import db from '../db'

let router = Router();

router.get('/:id?', async (req, res) => {
    let id = req.params.id;
    if (id) {
        try {
            let results = await db.one(id);
            res.json(results);
        } catch (e) {
            console.log(e);
            res.sendStatus(500).json({error: e || "Something went wrong"});
        }
    } else {
        try {
            let results = await db.all();
            res.json(results);
        } catch (e) {
            console.log(e);
            res.sendStatus(500);
        }
    }
});

router.delete('/:id', async (req, res) => {         
    let id = req.params.id;
    try {
        let results = await db.del(id);
        res.json(results)
    } catch (e) {
        console.log(e);
        res.sendStatus(500);
    }
    res.sendStatus(200);
})

router.put('/:id', async (req, res) => {
    let id = req.params.id;
    let text = req.body.text
    try {
        let results = await db.put(id, text);
        res.json(results)
    } catch (e) {
        console.log(e);
        res.sendStatus(500);
    }
    res.sendStatus(200);
})

router.post('/', async (req, res) => {
    let user = req.body.user
    let text = req.body.text
    try {
        let results = await db.post(user, text);
        res.json(results)
    } catch (e) {
        console.log(e);
        res.sendStatus(500);
    }
    res.sendStatus(200);
})

export default router;

server/src/db/index.js

import mysql from 'mysql'

let pool = mysql.createPool({
    connectionLimit: 10,
    password: 'chirperapp',
    user: 'chirperapp',
    database: 'chirperapp',
    host: 'localhost',
    port: '3306'
});

let chirprdb = {};

chirprdb.all = () => {
    return new Promise((resolve, reject) => {
        pool.query('SELECT * FROM chirps', (err, results) => {
            if (err) {
                connection.end()
                return reject(err);
            }
            return resolve(results);
        })
    })
}

chirprdb.one = (id) => {
    return new Promise((resolve, reject) => {
        pool.query('SELECT * FROM chirps WHERE id = ?', [id], (err, results) => {
            if (err) {
                return reject(err);
            }
            return resolve(results[0]);
        })
    })
}

chirprdb.del = (id) => {
    return new Promise((resolve, reject) => {
        pool.query('DELETE FROM chirps WHERE id = ?', [id], (err, results) => {
            if(err) {
                return reject(err);
            }
            return resolve(results)
        })
    })
}

chirprdb.put = (id, text) => {
    return new Promise((resolve, reject) => {
        pool.query('UPDATE chirps SET text= ? WHERE id = ?', [text, id], (err, results) => {
            if (err) {
                return reject(err);
            }
            return resolve(results)
        })
    })
}

chirprdb.post = (user, text) => {
    return new Promise((resolve, reject) => {
        pool.query('INSERT INTO chirps(name, text) VALUES (?, ?)', [user, text], (err, results) => {
            if(err) {
                return reject(err)
            }
            return resolve(results)
        })
    })

export default chirperdb;