Heroku / Node / React - как получить доступ к конечным точкам api моего узла на heroku

Question

Редактировать: я могу поделиться любым из моих файлов package.json, если это поможет.

Edit2: я не знаю, является ли это общий вопрос или тупой вопрос. Я знаю, что он не подходит для работы со стеком, но я боролся с этим героем уже большую часть дня.

Недавно я следовал учебному руководству , посвященному публикации приложения реакции / экспресса на heroku , и, хотя я думаю, что добился успеха, я не совсем понимаю, как получить доступ к своему API. Для справки, пара соответствующих шагов в учебнике:

1. Создайте Node / Express API, нажмите на heroku и проверьте, работает ли он (перейдя к конечным точкам API в URL и буквально просмотрев данные), и добавьте "start": "index узла .js " в файл Node package.json.

2. Создание приложения React внутри корневого каталога API-узла Node , добавьте в пакет приложенияact.json следующее: "proxy": "http://localhost:5000" ( Я так понимаю, что API и приложение могут общаться.

Я выполнил все эти шаги, и мое приложение React работает на герою . Приложение отображает, и, поскольку приложение использует Node API для получения данных для отображения, ясно, что Express / Node API работает.

Тем не менее, я бы хотел На самом деле увидеть конечные точки API узла, перейдя к конечной точке в моем браузере, и я не могу сделать это в Heroku в настоящее время. Все маршруты React работают, однако, когда я посещаю маршруты API, мой экран пуст. Любые мысли о том, как я могу посетить мои конечные точки API, которые находятся на heroku, в браузере?

Например, моя проблема:

Localhost Node

• когда я запускаю (node ​​index.js) на localhost, я могу получить доступ к конечным точкам API моего узла в http://localhost:8080/api/path/to/endpoint
• http://localhost:8080/ является корнем моего узла API

Реакция локального хоста

• когда я запускаю (запуск npm) на локальном хосте, я могу получить доступ к своему корню реагирующего приложения в http://localhost:3000/
• еще один из моих маршрутов реакции маршрутизатора - http://localhost:3000/myreactpage/,, который ведет на страницу моего приложения реакции.

Heroku

• допустим, имя моего приложения heroku https://dusty -manager-23562.herokuapp.com /
• https://dusty -manager-23562.herokuapp.com / ведет к корню моего приложения React
• https://dusty -manager-23562.herokuapp.com / myreactpage приводит к моей странице приложения реакции
• https://dusty -manager-23562.herokuapp.com / api / path / to / endpoint не не показывает мои данные, хотя я думал, что это будет / хочу увидеть мои данные. Вот мой вопрос.

Так что это моя проблема. Длинный пост для простого вопроса - почему я не могу посетить конечную точку API моего приложения node / express, когда оно отправлено в heroku, когда я могу видеть данные, когда оно в http://localhost:8080/api/path/to/endpoint. Приложение реагирования работает, поэтому он получает данные API правильно, но я хочу иметь возможность просматривать данные в браузере на конечной точке.

Спасибо!

Answer 1

Итак, есть две проблемы, которые, вероятно, работают в тандеме, чтобы вызвать эту головную боль.

Первая и более вероятная проблема заключается в том, что реагирующий маршрутизатор перехватывает URL-адреса "/ api" и преждевременно решает, что у него нет компонентов для показа. Способ исправить это - отредактировать свойство «proxy» в коде вашего клиента package.json.

"proxy": {
  "/api": {
    "target": "http://localhost:5000"
  }
}

(☝️ Я предполагаю, что вы сохранили номер порта 5000 из учебника. Если не измените его на 8080 или что-то другое, что вы использовали для номера порта API.)

Вторая проблема заключается в том, что сервисный работник, который создает для вас приложение create-реагирует, делает то же самое. Он читает путь и думает, что ему нечего обслуживать. Если ваш маршрут «/ api» все еще показывает пустую страницу, в инструментах разработчика вашего браузера перейдите на вкладку «Приложение» и нажмите «Очистить данные сайта» (если вы используете Chrome, не знаете, как это делается в других браузерах). ) затем обновите.

Если вам не нужен сервисный работник, удалите вызов registerServiceWorker() из index.js вашего клиентского кода. Если вы хотите, чтобы работник службы, вам нужно отредактировать файл registerServiceWorker.js, чтобы он немного больше различался в том, как он соответствует путям.

Надеюсь, это поможет!

Answer 2

Думаю, что это уместный пост здесь - Доступ к внутреннему API с помощью React, Axios на Heroku

Я не использую Axios, но думаю, app.get (*) может вызывать у меня проблемы.

РЕДАКТИРОВАТЬ: нет, это не помогло тонну на самом деле ...