Обработка JSON POST-запроса в Express. Следовал всем предложениям, но тело запроса пустое.

Вопрос или проблема

const response = await fetch('http://localhost:3100/api', { 
  method: 'POST',
  mode: 'no-cors',
  headers: {
    'Content-type': 'application/json'
  }, 
//  body: { "user":"1", "cmd":"Send NFT"},
  body: JSON.stringify({ user: 1, cmd:"Send NFT"}),
          })

const express = require('express');
const app = express();
const port = 3100;

app.use(express.json());

app.get("https://stackoverflow.com/", (req, res) => {
  res.send('Hello World!');
})

app.post('/api', (request, response) => {

  console.log("Пользователь: " + JSON.stringify(request.body) );

  if (request.body.user == 1) response.send(JSON.stringify({ user: 1, cmd: request.body.cmd}));
  else if (request.body.user == 2) response.send(JSON.stringify({user: 2, cmd: "Информация от 1"})); 
})

app.listen(port, () => {
  console.log(`Пример приложения слушает на порту ${port}`)
})

Ответ или решение

Уважаемые коллеги,

Обработка POST-запросов с использованием JSON в Express может вызывать некоторые трудности, особенно если вы работаете с такими инструментами, как React. Давайте детально разберем вашу ситуацию с кодом, который вы предоставили, чтобы устранить проблему с пустым телом запроса.

Анализ проблемы

Ваша цель заключается в отправке POST-запроса с использованием fetch из React в сервер на Express. Вы указали, что в ответ на запрос вы получаете пустое тело ("User: {}"). На это могут влиять несколько факторов.

Основные аспекты

1. CORS: Использование параметра mode: 'no-cors' в вашем запросе может препятствовать правильной отправке заголовков и данных. Это один из наиболее частых источников проблем с POST-запросами. При использовании no-cors браузер ограничивает ваш доступ к ответу и может не отправить запрос должным образом, из-за чего данные не достигают сервера.

2. Содержимое тела запроса: Данные должны быть корректно сериализованы. Ваша строка кода body: JSON.stringify({ user: 1, cmd: "Send NFT" }) выглядит правильно, однако нужно убедиться, что никаких проблем с сериализацией не возникает.

3. Настройка Express: На стороне сервера необходимо убедиться, что Express правильно обрабатывает JSON. Вы уже используете app.use(express.json()), что является хорошей практикой.

Решение

Чтобы устранить идентифицированные проблемы, выполните следующие шаги:

1. Измените fetch запрос:

const response = await fetch('http://localhost:3100/api', { 
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  }, 
  body: JSON.stringify({ user: 1, cmd: "Send NFT" }),
});

Удалите mode: 'no-cors', чтобы сервер мог правильно обработать запрос и вернуть ответ.

2. Проверьте сервер Express:

Убедитесь, что код вашего сервера выглядит следующим образом:

const express = require('express');
const app = express();
const port = 3100;

app.use(express.json());

app.get("/", (req, res) => {
  res.send('Hello World!');
});

app.post('/api', (request, response) => {
  console.log("User: ", request.body);

  if (request.body.user === 1) {
    response.json({ user: 1, cmd: request.body.cmd });
  } else if (request.body.user === 2) {
    response.json({ user: 2, cmd: "Info from 1" }); 
  }
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

3. Запустите сервер и тестируйте:

Теперь запустите ваш сервер и выполните запрос ещё раз из React-приложения. Проверьте консоль сервера на наличие ожидаемого вывода (например, User: {"user":1,"cmd":"Send NFT"}).

Заключение

Следуя вышеописанным шагам, вы должны исправить проблему с получением пустого тела запроса. Если проблема сохраняется, убедитесь в отсутствии ошибок в консоли вашего браузера и в настройках CORS на стороне сервера.

Если у вас останутся вопросы или появятся дополнительные трудности, пожалуйста, не стесняйтесь обращаться за помощью! Удачи в разработке вашего приложения!