Question

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

我的反应代码

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

您可以在以下文档中找到关于如何使用提取的更精确的说明：{{3}}

Answer 2

您的Express服务器似乎缺少主体解析器中间件。在路由处理程序之前添加此代码：

app.use(express.json())

通常，在向客户端发出JSON.stringify()请求时，您还需要将正文传递给fetch。

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

2 个答案: