Req.body 在通过 Fetch Api 发布请求时未定义

Question

当我尝试通过在 body 中传递参数来通过 fetch 方法调用 POST Api 时，我在后端（Node js 端）得到 req.body undefined。此外，当我通过 Postman 通过传递参数调用相同的 POST api 时在正文中然后它成功工作（我得到了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

这是使用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);
}

链接指向Node Fetch - post with 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 2

您必须使用 JSON.stringify 将您的身体数据转换为 JSON。

还要确保在后端启用cors。

问题在于 mode: 'no-cors' ，请删除它。因为application/json 在no-cors 模式下是不允许的。

注意 mode: "no-cors" 只允许请求中的一组有限的标头：

1. 接受
2. 接受语言
3. Content-Language Content-Type 的值为 application/x-www-form-urlencoded, multipart/form-data, 或 文本/纯文本

试试这个。

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

}

Answer 3

您还需要在构造函数中绑定函数 submitHandler 以访问 'this'

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