当我使 post 请求表单做出反应时，我在后端收到一个空体。我不懂为什么

Question

我一直在尝试使用对 node.js 后端的反应来发出 post 请求。使用 postman 发出 post 请求可以正常工作，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

Answer 1

使用 express 时，默认情况下 req 表示来自您的客户端应用程序的数据或信息的对象没有 body 属性，这就是您的 body 属性为空的原因。

因此，如果您想通过 http request 访问您的 client application 发送的数据，您应该添加一个中间件函数，该函数可以解析、检查传入请求并获取由 client application 发送的任何数据客户端通过 post 或 put method http verb，并将其添加到 request object 的 body attribute 中。该函数在您的路由 handler.[=28= 之前执行]

如果您在 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

中的内置功能

Answer 2

数据可以作为 URL 编码格式或原始 JSON 格式发送到后端，您必须处理这两种情况，如下所示。

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

当我使 post 请求表单做出反应时，我在后端收到一个空体。我不懂为什么

When I make post request form react the I recieve an empty body in the back end. I do not understand why

javascript

http-post

node.js

express

reactjs