Передача данных c сервера Node.js в App.js (react приложение) через proxy

@Fixer_84 · Регистрация: 30.04.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте, уважаемые форумчане! У меня следующий вопрос. Я, кажется, не до конца понимаю механизм передачи данных с сервера Node.js в ReactJS-приложение. На данный момент я получаю данные (то что вернул Node.js) через настройки файла package.json, а именно, я прописываю там "proxy" : "http://hostname:3001"

Вот так я передаю данные с сервера:

JavaScript
1
2
3
4
5
6
7
8
const express = require('express');
const app = express();
 
app.get('/secure/redirect', (req, res, next) => {
    res.send({ express: 'https://'});
});
 
app.listen(3001);

В примере выше, я просто передал в компоненту App.js с помощью express() строку 'https://':

...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
componentDidMount() {
   this.callAPI()
          .then(res => this.setState({ response: res.express }))
          //.then(res => (window.location.href = window.location.href.replace("http://", res.express)))
          .catch(err => console.log(err));
   }
      
   callAPI = async () => {
         const response = await fetch('/secure/redirect');
         const body = await response.json();
         if (response.status !== 200) throw Error(body.message);
         return body;
   };

...

Далее, мне понадобилось убрать фразу "proxy" : "http://hostname:3001" из package.json, так как вместо строки "http://hostname:3001" я пытался задать объект для proxy (чтобы он содержал еще одно поле: "secure" : true). Соответственно, я начал узнавать как это сделать и наткнулся на решение (оказалось, что в React есть специальная библиотека для этого, называется http-proxy-middleware).

JavaScript
1
2
3
4
5
6
7
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
 
const app = express();
 
app.use('/secure/redirect', createProxyMiddleware({ target: 'http://hostname', secure: true }));
app.listen(3001);

Как видно из кода выше, теперь я могу задать объект proxy и указать там два ключа: { target: 'http://hostname', secure: true }

Правильно ли я понимаю, что в роли клиента выступает приложение ReactJS, а в роли proxy, nodejs который доставляет информацию по адресу: '/secure/redirect' (по этому пути я получал данные, который возвращал сервер в самом начале)?

Я имею ввиду, что если раньше было прописано в package.json это:

"proxy" : "http://hostname:3001"

То теперь (после удаления информации из package.json о proxy) я должен делать так:

JavaScript
1
2
3
4
5
6
7
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
 
const app = express();
 
app.use('/secure/redirect', createProxyMiddleware({ target: 'http://hostname', secure: true }));
app.listen(3001);

Я не могу получить данные в App.js с помощью второго способа передачи данных с помощью proxy. Все ли сделал правильно? И еще один вопрос: когда proxy должен быть SSL? Когда он получает данные от https://api или когда передает их в https://hostname:3000 (именно для этого я пытался настроить второй параметр объекта proxy в secure : true).

Другими словами, что должно быть прописано вместо hostname в аргументе функции createProxyMiddleware({ target: 'http://hostname', secure: true }));? Просто http://hostname:3001 или http://hostname:3000? Ведь раньше я прописывал в package.json это: "proxy" : "http://hostname:3001" Вместо target должно быть тоже самое?

Нужно ли запускать скрипт выше как отдельный серверный скрипт? В первом случае, я запускал команду node secure_redirect.js, а затем npm start и все работало. Я получал данные, который возвращал сервер node.js (строку "https://") в приложение react. Во втором случае, я что-то сделал не так. Очень буду благодарен за вашк помощь.

@Fixer_84 · 25.01.2021, 20:42 **[ТС]**

Спасибо всем, кто уделил внимание. Удалось сделать все, что я предполагал о механизме передачи с помощью proxy. Оказалось, что не хватало важного условия: предустановленного пакета react-scripts@0.2.3 и выше для работы модуля http-proxy-middleware. Теперь второй параметр для proxy => secure: true позволил передать данные через SSL Proxy в react-приложение, что и требовалось, по безопасному соединению.

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@Fixer_84 1505 / 969 / 812 Регистрация: 30.04.2016 Сообщений: 3,337
	25.01.2021, 20:42 [ТС]
	Спасибо всем, кто уделил внимание. Удалось сделать все, что я предполагал о механизме передачи с помощью proxy. Оказалось, что не хватало важного условия: предустановленного пакета react-scripts@0.2.3 и выше для работы модуля http-proxy-middleware. Теперь второй параметр для proxy => secure: true позволил передать данные через SSL Proxy в react-приложение, что и требовалось, по безопасному соединению. 0