React Fetch与ExpressJS POST请求失效，排查遗漏配置

问题根源分析 #

你的代码存在几处关键配置遗漏和错误，导致POST数据无法正常传递：

1. Express未配置JSON请求体解析
   React端用JSON.stringify()发送JSON格式数据，但Express仅配置了解析x-www-form-urlencoded格式的中间件，无法解析JSON请求体，导致req.body为空。

2. Express POST接口未返回响应
   你的POST接口仅打印数据但未给前端返回响应，会导致前端fetch请求挂起，甚至触发错误。

3. React表单输入值绑定错误
   input的value绑定了this.state.value，但你的state里只有name字段，输入框无法正确同步值。

修复步骤及代码修改 #

1. 修正Express配置

添加JSON请求体解析中间件，并给POST接口返回响应：

const express = require('express')
const app = express()
const port = 3001
const bodyParser = require("body-parser");
// 同时解析urlencoded和JSON格式的请求体
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json()); // 新增：解析JSON请求体
app.use(express.static("public"));

// 其他GET接口保持不变

// 修改后的POST接口
app.post('/info', function (req, res) {
    const info = {
        first_name: req.body.name
    };
    console.log(info);
    // 返回响应给前端
    res.status(200).json({ success: true, data: info });
})

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

2. 修正React表单绑定与请求配置

修正input值绑定，显式指定请求头并增加错误捕获：

import React from 'react'

class UserForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: '' };
    }

    handleChange = (event) => {
        this.setState({ [event.target.name]: event.target.value });
    }

    handleSubmit = (event) => {
        alert('A form was submitted: ' + JSON.stringify(this.state));

        fetch('/info', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json' // 显式指定请求体格式
            },
            body: JSON.stringify(this.state)
        }).then(function (response) {
            console.log(response)
            return response.json();
        }).catch(err => {
            console.error('请求错误:', err); // 捕获请求异常
        });

        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    {/* 修正value绑定为state中的name字段 */}
                    <input type="text" value={this.state.name} name="name" onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

export default UserForm;

内容的提问来源于stack exchange，提问作者Jey prod