javascript - 如何将提交的表单数据发送到本地服务器

Question

我正在尝试使用 React 和 Node.js 构建一个非常基本的全栈应用程序。我无法让前端将数据发送到服务器。我在控制台中收到 POST http://localhost:4000/500(内部服务器错误)。我需要做什么才能将用户提交的数据发送到服务器，以便我可以将其存储在数据库中？

我的 react 代码

class App extends React.Component {
    constructor() {
        super();
        this.state = {text: ''}
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    handleSubmit(e) {
        e.preventDefault();
        fetch('http://localhost:4000/users', {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: this.state.text // trying to send this text to the server
        })
            .then((response) => {
                console.log('success writing to server', response)
            })
            .catch((err) => {
                console.log('error writing to server', err);
            })
    }

    handleChange(e) {
        this.setState({
            text: e.target.value
        })
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input onChange={this.handleChange} type="text" placeholder="Name" ref="name" />
                <input type="submit" />
            </form>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

我的服务器代码:

const express = require('express');
const mysql = require('mysql');

const port = process.env.port || 4000;
const app = express();

let db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'my_db'
})


app.use(express.static('public'));

app.post('/users', function (req, res) {
    console.log(req.body) // undefined
    // I would have thought that req.body.text would work but req.body is undefined
    db.query(`INSERT INTO users (user) VALUES ("${req.body.text}")`, function (err, result) {
        if (err) {
            console.log('error inserting into database', err.sqlMessage);
        } else {
            console.log('successful insertion into database', result);
        }
    });
    res.sendStatus(201);
});
app.listen(port, 'localhost');

Answer 1

通过在您的请求中指定 "Content-Type": "application/json"，您告诉您的服务器它将接收一个 JSON 对象。
但是，您发送的正文是 this.state.text，它是您输入的原始值，一个字符串，而不是 JSON，这就是您的服务器将其视为未定义的原因。

您首先需要将其放入 JSON 中，然后在将其发送到您的服务器之前将其字符串化:

fetch('http://localhost:4000/users', {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({ textInput: this.state.text })
})

另一种方法是告诉服务器它将接收原始文本:

fetch('http://localhost:4000/users', {
    method: "POST",
    headers: {"Content-Type": "text/plain"}, //Expects a raw text body
    body: this.state.text
})

您可以在以下文档中看到有关如何使用 fetch 的更准确说明:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch