Передача данных 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-приложение, что и требовалось, по безопасному соединению.

Новые блоги и статьи Все статьи Все блоги /
Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.

@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

Опции темы