Блог

Каждый раз, когда я отправляю POST-запрос (выборку) с телом, содержащим состояние приложения. Я получаю пустой объект на стороне подачи. Что здесь не так? Я должен получить объект с именем, именем пользователя и паролем.

Вывод консоли

Вы прослушиваете порт 4000
{}
{}

Код сервера

 import express from "express";
import cors from "cors";
import bodyParser from "body-parser";

const app = express();

app.use(cors());
app.use(bodyParser.urlencoded({extended: true}));

app.get('/', (req, res)=> {
    res.json({ip: req.connection.remoteAddress});
})

app.post('/post', (req,res)=> {
    console.log(req.body);
    res.json({a: "hello"})
})

app.listen(4000, "0.0.0.0",()=> {
    console.log("You are listening to port 4000")
});
  

Код клиента

 import React from "react";

class Form extends React.Component{
    constructor() {
        super();
        this.state = {
            name: '',
            username: '',
            password: ''
        }
    }

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

    handleSubmit =  async (e) => {
        e.preventDefault();
        let res = await fetch('http://localhost:4000/post', {
            mode: 'cors',
            method: 'POST',
            headers: { 
                "Content-type": "application/json; charset=UTF-8"
            },
            body: JSON.stringify(this.state)
        });
        console.log(res);
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <div>
                    <legend>Name</legend>
                    <input value={this.state.name} onChange={this.handleChange} name='name' type='text'></input>
                </div>
                <div>
                    <legend>Username</legend>
                    <input value={this.state.username} onChange={this.handleChange} name='username' type='text'></input>
                </div>
                <div>
                    <legend>Password</legend>
                    <input value={this.state.password} onChange={this.handleChange} name='password' type='password'></input>
                </div>
                <button>Submit</button>
            </form>
        )
    }
}


export default Form;
  

Похоже, вы используете req.params в post конечной точке. req.params используется для захвата параметров маршрута. Вам нужно использовать req.body , чтобы получить тело запроса POST.

 import express from "express";
import cors from "cors";
import bodyParser from "body-parser";

const app = express();

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

app.get('/', (req, res)=> {
    res.json({ip: req.connection.remoteAddress});
})

app.post('/post', (req,res)=> {
    console.log(req.body);
    res.json({a: "hello"})
})

app.listen(4000, "0.0.0.0",()=> {
    console.log("You are listening to port 4000")
});
  

вы отправляете тело JSON, вам нужно добавить json bodyparser

 app.use(bodyParser.json());