В ответ, как я могу передать API REST бэкэнда моему веб-интерфейсу? - PullRequest
Новая
       34

В ответ, как я могу передать API REST бэкэнда моему веб-интерфейсу?

0 голосов
/ 27 июня 2018

Довольно нубийский вопрос здесь, я не хочу рисовать зенитки. Я создал свой веб-интерфейс с помощью create-реагировать-приложение, и я использую fetch для передачи API бэкэнда в мой веб-интерфейс. Бэкэнд работает на localhost: 8080 на той же машине, что и интерфейс. Интерфейс работает на порту 3000. Я жестко закодировал URL-адреса как "http://localhost:8080/getForm" и т. Д. Все работает нормально, если я получаю доступ к веб-интерфейсу на той же машине, на которой он размещен. Однако, если я получаю доступ к веб-интерфейсу из на другом компьютере вызовы API завершаются неудачно, что имеет смысл, поскольку вызовы выполняются на localhost.

Теперь, что было бы лучшим подходом для передачи машинно-независимых остальных URL? Я не хочу устанавливать статический IP для своего бэкэнда. Я пробовал:

  1. Создание производственной сборки и связывание ее с бэкэндом. Это снова делает вызовы localhost на обращающемся компьютере, который терпит неудачу.
  2. Управление URL с помощью window.location.hostname + "getForm". Это не удается, если у меня есть разные серверы, на которых размещены внешний и внутренний серверы.

Изменить * Хорошо, мне удалось добавить прокси на сервер узла, добавив следующую строку в package.json. "proxy":"http://localhost:8080/" Это пересылает что-то вроде localhost: 3000 / api / getForm на внешнем интерфейсе на localhost: 8080 / api / getForm на внутреннем. Это работает довольно хорошо, но теперь я застрял в проблеме, которая, я полагаю, связана с неправильной настройкой CORS. Прокси-запросы GET к бэкэнду, то есть Spring Boot API, работают нормально, но прокси-запросы POST возвращают 403 с ответом «Недопустимый запрос CORS».

Я добавил @CrossOrigin (origins = "http://localhost:3000") к уровню класса моего весеннего приложения, что должно сделать все API-интерфейсы CORS дружественными. Кроме того, я использую fetch на внешнем интерфейсе для совершения вызовов. в чем я могу ошибаться?

POST / api / post HTTP / 1.1 Хост: localhost: 3000 Подключение: keep-alive Длина контента: 22 Происхождение: http://localhost:3000 Пользователь-агент: Mozilla / 5.0 (X11; Linux x86_64) AppleWebKit / 537.36 (KHTML, как Gecko) Chrome / 67.0.3396.87 Safari / 537.36 Тип контента: приложение / JSON Принимаем: / Рефере: http://localhost:3000/ Accept-Encoding: gzip, deflate, br Accept-Language: en-IN, en-GB; q = 0,9, en-US; q = 0,8, en; q = 0,7

Body - {"title": "abc", "body": "def"}

Ответ - 403, неверный запрос CORS

GET / api / get HTTP / 1.1 Хост: localhost: 3000 Подключение: keep-alive Пользователь-агент: Mozilla / 5.0 (X11; Linux x86_64) AppleWebKit / 537.36 (KHTML, как Gecko) Chrome / 67.0.3396.87 Safari / 537.36 Принимаем: / Рефере: http://localhost:3000/ Accept-Encoding: gzip, deflate, br Accept-Language: en-IN, en-GB; q = 0,9, en-US; q = 0,8, en; q = 0,7

Ответ - 200, [{"id": 1, "title": "Post 1", "body": "Backend подключен нормально и модно!"}]

1 Ответ

0 голосов
/ 27 июня 2018

Если вы не обслуживаете свой код с помощью узла, вы можете использовать веб-пакет для добавления глобалов, но тогда вам нужно создать отдельную сборку для каждой среды.

При использовании узла с SSR:

Обычно я использую файл .env с конкретными константами для имени хоста, порта и т. Д. И использую их в файле конфигурации js. Затем вы можете импортировать этот js-файл и использовать его для вызовов вызовов. Вы можете использовать dotenv (https://www.npmjs.com/package/dotenv) для добавления переменных .env к процессу вашего узла.

файл конфигурации: 

const config = {
  env: {
    host: (envConfig && envConfig.API_HOST) || 'localhost',
    port: (envConfig && envConfig.API_PORT) || '8000',
    httpOrigin: (envConfig && envConfig.API_PROTOCOL) || 'http'
  }
}

export default config;

.env file: 

API_PROTOCOL=https
API_HOST=localhost
API_PORT=8000

Чтобы перенести конфиг на внешний интерфейс, вы можете сериализировать его в теле вашего html и взять его на стороне клиента. 

<script dangerouslySetInnerHTML={{ __html: `window.__envConfig=${serialize(envConfig)};` }} charSet="UTF-8"/>
...