Axios 的 POST 请求未向我的服务器发送数据

Question

这是我提交表单的 React 代码：

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('item:', item);
    Axios.post('http://<MY_SERVER>/item/add', {name:item})
      .then(response => console.log(response))
      .catch(err => console.log(err));
  };

这是我的 Node API 中的代码：

// Add a new Item
app.post('/item/add', (req, res) => {
  const newItem = new Item({
    name: req.body.name
  });

  newItem.save()
    .then(item => {
    res.json({msg: 'success'});
    })
    .catch(err => console.log(err));
});

当我运行 handleSubmit 时，什么也没有发生。我只得到console.logs ...另外，这是来自我的服务器的错误

'ValidationError: item validation failed: name: Path' `name` is required

所以很明显，发送到 api 的数据永远不会被接收到。我已经尝试过在网上遇到的多种方式对其进行更改，但没有运气。

Answer 1

我已经附加了两种发布数据的方式，即表单 URL 编码和 JSON。为了发送表单 URL 编码数据，我们需要一个额外的库 querystring。

您可以使用npm install query-string安装它

这是两个请求的代码。如果您使用内容类型 application/json，则不需要 query-string。

给你

var axios = require('axios');
const qs = require('querystring');

function sendFormUrlEncodedData() {
  const headers = {
    'Content-Type': 'application/x-www-form-urlencoded'
  };

  const payload = {
    name: 'morpheus',
    job: 'leader'
  };

  //Send data with form url using querystring node package for it.
  axios
    .post('https://reqres.in/api/users', qs.stringify(payload), {
      headers: headers
    })
    .then(res => {
      console.log(res.data);
    })
    .catch(err => {
      console.log(err);
    });
}

function sendJSONData() {
  const headers = {
    'Content-Type': 'application/json'
  };

  const payload = {
    name: 'morpheus',
    job: 'leader'
  };

  //Send data with JSON, so stringifying it.
  axios
    .post('https://reqres.in/api/users', JSON.stringify(payload), {
      headers: headers
    })
    .then(res => {
      console.log(res.data);
    })
    .catch(err => {
      console.log(err);
    });
}

sendFormUrlEncodedData();
sendJSONData();

Answer 2

首先使用邮递员检查您的后端代码是否正常工作。我认为由于后端代码错误，您会收到验证错误。并检查您是否使用其数据类型正确实现了 name 属性。 更新后，react 代码如下。

import axios from 'axios';


constructor() {
  this.item = {
    name: ''
  }
}

 handleSubmit(event) {
    console.log('item:', this.item.name);
    event.preventDefault();

    axios.post('http://<MY_SERVER>/item/add', this.item)
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.log(error);
    });

}