Как установить соединение между запущенными локальными серверами express и react, чтобы обмениваться запросами?

Как настроить обмен данными между локальными серверами? У меня есть компонент формы, который отправляет запрос на сервер с использованием fetch API. Однако, запрос блокируется из-за CORS политики. При этом, при обработке запроса на сервере Express, req.body всегда является пустым объектом, хотя парсеры уже добавлены. Меня интересует, как можно настроить коммуникацию между этими серверами?
  • 7 октября 2023 г. 14:07
Ответы на вопрос 1
Для установки соединения между серверами Express и React и настройки обмена данными, вам понадобится сделать следующее:

1. Установите пакеты `cors` и `body-parser` в вашем Express-сервере:

```bash
npm install cors body-parser
```

2. Импортируйте и использовать эти пакеты в вашем Express-сервере:

```javascript
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();

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

// Ваш код Express-сервера
```

3. В вашем React-компоненте (компоненте формы) для отправки запроса на Express-сервер используйте fetch API:

```javascript
// Пример отправки POST-запроса с данными формы
fetch('http://localhost:ваш_порт/ваш_маршрут', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ /* данные формы */ }),
})
  .then(response => response.json())
  .then(data => {
    // Обработка ответа от сервера
  })
  .catch(error => {
    // Обработка ошибок
  });
```

Убедитесь, что вы указали правильный порт и маршрут для вашего Express-сервера.

4. Убедитесь, что ваш Express-сервер настроен для обработки запросов POST на указанном маршруте. Например:

```javascript
app.post('/ваш_маршрут', (req, res) => {
  const formData = req.body;
  
  // Обработка данных формы и отправка ответа
});
```

Важно: убедитесь, что ваш React-сервер и Express-сервер запущены и слушают на своих портах. Также убедитесь, что порт и маршрут соответствуют между серверами и в fetch-запросе.
Похожие вопросы