React FormData () показывает правильную полезную нагрузку, но получает 400 неверных запросов

Question

Я использую звонок на new FormData(). Вкладка сети показывает, что полезная нагрузка правильная. В консоли я получаю следующую ошибку:

{message: "Blog validation failed: title: Path `title` is required., postBody: Path `postBody` is required."}

Однако на вкладке сети отображается отправка полей title и postBody:

Вывод заголовков вкладки сети

Сервер написан с nodejs и использует mongodb. Все маршруты работают на бэкэнде при тестировании. Данные отправляются нормально при тестировании с использованием файла .rest, но я все еще новичок в узле, поэтому я также опубликую свой обработчик для маршрута отправки:

router.post('/', async (req, res) => {
    const blogPost = new Blog({
        title: req.body.title,
        author: req.body.author,
        postBody: req.body.postBody,
        postDate: req.body.postDate
    })
    try {
        const newPost = await blogPost.save();
        res.status(201).json(newPost);
    } catch (err) {
        res.status(400).json({ message: err.message })
    }
})

Как я уже говорил, при создании вызовы по этому маршруту напрямую с использованием файла .rest все работает нормально.

Вот мой обработчик отправки формы на веб-интерфейсе:

handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.target);

    console.log(event.target);
    console.log(data);
    console.log(event.target.postBody.value);

    fetch('http://localhost:4000/blog', {
      method: 'POST',
      mode: 'cors',
      body: data
    })
    .then(res => res.json())
    .then(err => console.error(err))
  }

Может быть, я неправильно понимаю использование new FormData()?

Answer 1

Вам нужно установить body-parser и использовать эту зависимость в приложении. js (или имя, которое вы используете)

Скопировать следующий фрагмент вверху файла:

const bodyParser = require('body-parser');
const express = require('express');
const app = express();

Затем скопируйте следующий фрагмент в теле файла;

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

С этим ваш маршрут будет готов!

Answer 2

Хорошо, поэтому, когда я добавил body-parser, я все еще получал ту же ошибку. Не уверен, что я делаю неправильно. Однако в интересах моего собственного времени, чтобы справиться с этим, я нашел другое решение. Я принимаю json в своем приложении узла через app.use(express.json())

В конце мне просто нужно было отправить заголовки с типом контента, и я больше не использую FormData(). Мой обновленный обработчик отправки формы (работает):

handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.target);
    const body = event.target.postBody.value;
    const postTitle = event.target.title.value;

    console.log(event.target);
    console.log(data);
    console.log(event.target.postBody.value);

    fetch('http://localhost:4000/blog', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      mode: 'cors',
      body: JSON.stringify({
        title: postTitle,
        postBody: body
      })
    })
    .then(res => res.json())
    .then(err => console.error(err))
  }

Это работает для меня, и это то, что я собираюсь сделать сейчас, чтобы я мог двигаться вперед, однако он по-прежнему не отвечает, почему formData ( ) Метод, который я пробовал ранее, не работал, даже после использования body-parser, как было предложено здесь.

Answer 3

Вам нужен анализатор тела в приложении вашего узла

 const bodyParser = require('body-parser')

 app.use(
     bodyParser.urlencoded({
         extended: true
     })
 )

app.use(bodyParser.json())

Также убедитесь, что вы получили свои данные. Попробуйте записать свои данные.