Можно ли предоставить спокойный сервис от реакции?

Question

Я работаю над веб-проектом, который должен обеспечить полноценный почтовый сервис с реагирующей платформой.

В Inte rnet.

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

Я попробовал следующее,

1 - предоставить сервис из реагирующей среды. я вижу, что это невозможно.

2 - предоставить сервис от express и связать его с реакцией через прокси https://www.youtube.com/watch?v=v0t42xBIYIs

для этого примера, метод get работает но post-метод этого не делает.

мой express сервер, как показано ниже.

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

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/api/customers', (req, res) => {

  res.json(req.body);
});


const port = 5000;

app.listen(port, () => `Server running on port ${port}`);

после этого, используйте прокси и реагируйте на код, подобный этому

  componentDidMount()
  {

      fetch('/api/customers')
      .then(res => res.json())
      .then(customers => this.setState({customers}, () => console.log('Customers fetched...', customers)));

на в этот момент я получаю ошибку ниже

customers.js:18 GET http://localhost:3000/api/vehicles 500 (Internal Server Error)

спасибо за все советы.

я ищу наилучшую практику.

Answer 1

Результатом сборки приложения React являются пакеты сценариев и файлы html (также могут включать исходные карты для отладки), обычно называемые артефактами сборки.

Лучшая практика проста: Когда задействован Express, приложение React должно загрузить артефакты сборки и ответы API из Express (в этом сценарии обычно называемые бэкэндом).

Что происходит, когда этого не происходит: 1. React-интерфейс сервера (обычно webpack-dev-server) используется в производстве. Это не очень хорошая идея, webpack-dev-server предназначена для использования только в разработке. 2. Браузер обнаруживает, что JS код из пакетов, загруженных с одного сервера (веб-интерфейс), пытается вызвать другой сервер (бэкэнд) и вызывает нарушение безопасности, которое предназначено для повышения безопасности. Затем люди используют HTTP-заголовки CORS (отправленные бэкендом), чтобы заставить бэкэнд сказать браузерам: «Не беспокойтесь о безопасности и не вызывайте нарушения безопасности, я (бэкэнд) был защищен до такой степени, что я не все равно, что какой-то код, загруженный не от меня, пытается получить доступ ко мне ". Браузер соответствует, и это приводит к ненужному снижению безопасности.

Когда использовать прокси: Только в разработке. webpack-dev-server отлично подходит для разработки благодаря поддержке Live Reloading, HMR et c. Чтобы сохранить эти преимущества, бэкэнд (Express) может и должен служить обратным прокси-сервером для внешнего интерфейса. Например, когда Express получает запрос на артефакт сборки, он должен сначала загрузить его с внешнего интерфейса, а затем использовать его для отправки ответа обратно. Это гарантирует, что проблемы с CORS не возникнут.

Answer 2

Я думаю, что нет способа для передачи данных с сервера на клиент обычным способом.

есть хороший предмет для pu sh данных с сервера на клиент. Вы можете захотеть увидеть это.

WebSocket vs ServerSentEvents

Answer 3

На самом деле, я думаю, вы не сфокусировались на том, что оба работают на двух разных портах , как ваш сервер работает на Port:5000 и реагируют на проект port:3000, поэтому просто добавьте "proxy":http://localhost:5000

//server.js  (node file)***

app.get('/api/customers', (req, res) => {
  const customers = [
    {id: 1, Name: 'Rohan', email: 'r@gmail.com'},
    {id: 2, Name: 'Rohan', email: 'r@gmail.com'}
  ];

  res.json(customers);
});

const port = 5000;

app.listen(port, () => `Server running on port ${port}`)

// React Script***

class Customers extends Component {
  constructor() {
    super();
    this.state = {
      customers: []
    };
  }

  componentDidMount() {
    fetch('/api/customers')
      .then(res => res.json())
      .then(customers => this.setState({customers}, () => console.log('Customers fetched...', customers)));
  }

Answer 4

Два вопроса выделяются

Пост против Get

Вы обслуживаете свой API от конечной точки поста. Измените его на get.

app.get('/api/customers', (req, res) => {res.json(vehicleList);});

fetch

В пользовательском интерфейсе показано, что вы выбираете с localhost: 3000 , когда вы должен быть извлечен из localhost: 5000 . Я предполагаю, что ваш прокси перенаправляет 3000 -> 5000 , так что, надеюсь, это не проблема. Однако я бы дважды проверил и попробовал нажать localhost: 3000 / api / customer url (скопировать и вставить его в строку url) и посмотреть, видите ли вы json.

также

Можно, конечно, express обслуживать набор ответов stati c из того же базового URL, что и ваш API. например

app.use('/', express.static('public'));
app.post('/api/customers', (req, res) => {
  res.json(vehicleList);
});