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

【问题标题】：Sending state for an Axios POST and data not showing in req.bodyAxios POST 的发送状态和数据未显示在 req.body 中
【发布时间】：2020-12-24 23:04:52
【问题描述】：

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

我正在尝试在 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'

【问题讨论】：

标签： javascript node.js reactjs axios xmlhttprequest

【解决方案1】：

要处理来自 HTTP POST 请求的传入 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+ )

【讨论】：

这并没有回答作者的问题。
express.json() 的行帮助了我，我已经一个小时左右没有找到答案，谢谢。

【解决方案2】：

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

你也可以分享你在那里测试过 API 的邮递员的示例请求正文

let body= JSON.stringify(formData)

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

【讨论】：