Блог

Главная - Вопросы по программированию - Когда я заставляю форму запроса post реагировать, я получаю пустое тело в серверной части. Я не понимаю, почему

Когда я заставляю форму запроса post реагировать, я получаю пустое тело в серверной части. Я не понимаю, почему

#javascript #node.js #reactjs #express #http-post

#javascript #node.js #reactjs #выразить #http-post

Вопрос:

Я пытался сделать запрос post, используя react на node.js серверная часть. Выполнение запросов post с помощью postman работает нормально, и запросы get также работают нормально. Вот мой код реакции. Независимо от того, что я пытаюсь, полученный req.body всегда пуст в серверной части узла.

 import axios from "axios";

class PostForm extends Component {
    constructor(props){
        super(props)

        this.state = {
            userId:'',
            title:'',
            body:''
        }
    }

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


    submitHandler = (e) =>{
        e.preventDefault()
        console.log(this.state)
        axios.post("http://localhost:2000/api",this.state).then(response=>{console.log(response)}).catch(error=>(console.log(error)))

    }


    render() {
        const {userId,title,body} = this.state
        return (
            <div>
            <form onSubmit={this.submitHandler}>
                <div>
                    <input type="text" name="userId" value={userId} onChange={this.changeHandler}/>
                </div>
                <div>
                    <input type="text" name="title" value={title} onChange={this.changeHandler}/>
                </div>
                <div>
                    <input type="text" name="body" value={body} onChange={this.changeHandler}/>
                </div>
                <button type="submit">Submit</button>
            </form>
                
            </div>
        )
    }
}

export default PostForm

Комментарии:

1. Со стороны кода это выглядит нормально. Проверьте свой сервер, если вы используете nodejs, тогда вам может потребоваться использовать bodyparser промежуточное программное обеспечение

2. @ShubhamVerma Я уже использую body-parser в своей серверной части const bodyParser = require("body-parser") и app.use(bodyParser.urlencoded({ extended: true })); . Но мне интересно, может ли это быть серверной проблемой, поскольку сообщения от postman работают нормально?

3. вы использовали app.use(bodyParser.json({ limit: '10mb' })); или просто анализатор тела для формата urlencoded

4. Войдите в серверную часть, а также проверьте путь к api. Со стороны интерфейса все выглядит нормально

5. @JithinZachariah прежде всего, ты ангел, посланный с небес! Во-вторых, почему это работает и почему это больше нигде не упоминается? И в-третьих, почему мои сообщения от postman не работают?

Ответ №1:

Данные могут быть отправлены на серверную часть в формате URL в кодировке или в формате raw JSON, вы должны обрабатывать оба случая, как показано ниже.

 app.use(bodyParser.json({ limit: '10mb' }));
app.use(
  bodyParser.urlencoded({
    limit: '10mb',
    extended: true,
    parameterLimit: 50000
  })
);

Ответ №2:

При работе с express по умолчанию req объект, который представляет данные или информацию, поступающие из вашего клиентского приложения, не имеет атрибута body , и именно по этой причине ваш атрибут body пуст.

Поэтому, если вы хотите получить доступ к данным, отправленным вашим client application через an http request , вам следует добавить промежуточную функцию, которая может анализировать, проверять входящий запрос и принимает любые данные, отправленные клиентом через post or put method http verb , и добавлять их в body attribute request object .Эта функция выполняется перед вашим маршрутом handler .

Если ваши отправленные данные в a JSON format должны добавить следующее middleware :

app.use(express.json()) и ваш код будет выглядеть так :

 const express=require('express');

const app=express();

app.use(express.json())

Если данные поступают в urlencoded format то место, где у вас есть такая форма <form method='post' action='http://yourserver/routes_handler'>...</form> , без запроса ajax, вы вместо этого добавите следующее промежуточное программное обеспечение:

app.use(express.urlencoded({extended:false})) //it can be true or false depending on what you wan to achieve .

Если данные могут поступать в двух форматах, тогда вы будете использовать оба промежуточных ПО, и ваш код будет выглядеть так:

 const express=require('express');

const app=express();

app.use(express.json());
app.use(express.urlencoded({extended:false}));

Вам не нужно устанавливать сторонний пакет, например body-parser , для добавления промежуточного программного обеспечения, в которое оно уже встроено express