发送状态的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.上的数据

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

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

然后我可以在req中看到formData:“这是表单数据”。身体

Answer 1

要处理来自HTTPPOST请求的传入JSON对象，需要编写以下代码-

var express = require('express');
var app=express();
app.use(express.urlencoded());  // To parse URL-encoded bodies
app.use(express.json()); //To parse JSON bodies

// Note: (*applicable for Express 4.16+ )

Answer 2

您需要在sendInvoice函数中对formData进行字符串化，

您还可以在那里分享您测试过的API的postman提供的示例请求正文吗

let body= JSON.stringify(formData)

const config = {
      headers: {
        'Content-Type': 'application/JSON'
      }
    };
const res = await axios.post('/api/v1/new_invoice', body, config);