Req.body не определено при отправке запроса через Fetch Api

Question

Когда я пытаюсь вызвать POST Api через метод fetch, передав параметр в теле, я получаю req.body undefined на стороне бэкенда (Node js сторона). Также когда я вызываю тот же API POST через Postman, передавая параметр в теле, то он работает успешно (я получил req.body). задний конец находится в node js, а передний конец - в React js. Будем благодарны за любую помощь.

import React, { Component } from 'react'
import '../Css/Login.css'

export class Login extends Component {

    constructor(props) {
        super(props)

        this.state = {
            name: "",
            password: ""
        }

        this.onChange = this.onChange.bind(this);
    }

    submitHandler = (e) => {
        e.preventDefault();
        console.log(this.state);
        try {

            let result = fetch('http://localhost:4000/users/login', {
                method: 'POST',
                mode: 'no-cors',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'

                },
                body: { name: this.state.name, password: this.state.password }
            })

            result.then((sucess) => { console.log(sucess) })
        } catch (error) {
            console.log(error)

        }



    }

    onChange(e) {
        this.setState({ [e.target.name]: e.target.value })

    }
    render() {
        return (
            <div>
                <div className="LoginPage">
                    <div class="container Login_div">
                        <div className="Admin_panel"><h2>Admin Panel</h2></div>

                        <form onSubmit={this.submitHandler}>
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="text" name="name" class="form-control" placeholder="Enter email" onChange={this.onChange} />
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" name="password" class="form-control" placeholder="Enter password" onChange={this.onChange} />
                            </div>

                            <button type="submit" class="btn btn-login">Submit</button>
                        </form>
                    </div>

                </div>
            </div>
        )
    }
}

export default Login

Answer 1

Также вам нужно будет связать функцию submitHandler в конструкторе, чтобы получить доступ к ' this '

 this.submitHandler =this.submitHandler .bind(this);

Answer 2

Это использование node-fetch? Поэтому я думаю, что вам нужно добавить JSON.stringify() к телу.

try {

    let result = fetch('http://localhost:4000/users/login', {
        method: 'POST',
        mode:'no-cors',
        headers: {
            'Content-Type':'application/json',
            'Accept':'application/json'
        },
        body: JSON.stringify({ name: this.state.name, password: this.state.password })
    });

    result.then((success) => { console.log(success) });
} catch (error) {
    console.log(error);
}

Ссылка ссылается Выбор узла - пост с json. Я надеюсь, что это работает.

ОБНОВЛЕНИЕ Если ваш бэкэнд использует ExpressJs, убедитесь, что вы добавили.

const app = express();

// push them above the router middleware!

// parse application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }));

// parse application/json
app.use(express.json());

Answer 3

Вы должны преобразовать свои данные тела в JSON с помощью JSON.stringify.

, а также убедиться, что cors включено на стороне сервера.

Проблема с mode: 'no-cors', пожалуйста, удалите это. AS application/json не допускается в режиме no-cors.

Обратите внимание, что режим: "no-cors" допускает только ограниченный набор заголовков в запросе:

1. Accept
2. Accept-Language
3. Content-Language Content-Type со значением application / x- www-form-urlencoded, multipart / form-data или text / plain

Попробуйте это.

submitHandler = (e) => {
    e.preventDefault();
    console.log(this.state);
    try {
        let result = fetch('http://localhost:4000/users/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ name: this.state.name, password: this.state.password })
        })
        result.then((sucess) => { console.log(sucess) })
    } catch (error) {
        console.log(error)
    }

}