Axios POST 的发送状态和数据未显示在 req.body 中

Question

我正在使用 React 并想使用 Axios 发出 POST 请求。我正在尝试将表单数据发送到我的节点后端。

我正在尝试在 POST 请求中发送一个对象，该对象是将所有用户输入保存到表单的状态。

反应

  const [formDetails, setFormDetails] = useState({})

  const handleFormChange = (evt) => setFormDetails({ ...formDetails, [evt.target.name]: evt.target.value })

  const sendInvoice = async (formDetails) => {

    const response = await axios.post('/api/new_invoice', formDetails)

    console.log(response)

}

节点路由

module.exports = (app) => {

// Create a new invoice

app.post('/api/new_invoice', async (req, res) => {

    console.log('making a new invoice...')

    try {

        console.log(req.body)

        res.send(req.body)

    } catch (err) {

        console.log(err)

        res.status(400)

        res.send({ error: err })

        return

    }

})

}

这就是我得到的： 

当我查看响应的 req.body 时，它是一个空对象，即使我可以在发送表单时看到状态存在。

我还尝试对对象进行硬编码，这将在 req.body 上显示数据。

例如，如果我将请求更改为

const response = await axios.post('/api/new_invoice', {formData: 'this is form data'})

然后我可以在 req.body 中看到 formData: 'this is form data'

Answer 1

您需要将 formData 字符串化，在您的 sendInvoice 函数中，您还可以分享邮递员的示例请求正文吗？您已经在那里测试了 APIlet body= JSON.stringify(formData)const config = {      headers: {        'Content-Type': 'application/JSON'      }    };const res = await axios.post('/api/v1/new_invoice', body, config);

Answer 2

要处理来自 HTTP POST 请求的传入 JSON 对象，您需要编写以下代码 -var express = require('express');var app=express();app.use(express.urlencoded());  // To parse URL-encoded bodiesapp.use(express.json()); //To parse JSON bodies// Note: (*applicable for Express 4.16+ )