Мой вопрос здесь немного нетрадиционный, поэтому требует немного фона. Я строю приложение React и сервер Express. Во-первых, для этого приложения мне было необходимо, чтобы пользователь мог ввести свой собственный ключ API Google и сохранить его в базе данных для будущих вызовов API. Моему клиентскому приложению React необходимо импортировать API Google из тега сценария с ключом API пользователя в параметрах запроса.
Итак, я создал маршрут на сервере /api/util/googleAPI, который скажет серверу выполнить AJAX-вызов, чтобы получить скрипт API Google, используя ключ API пользователя, и вернуть его. Все работает отлично и хорошо, я могу использовать тег script с https://domain/api/util/googleAPI, и он импортирует API Google, используя сохраненный ключ пользователя.
Моя проблема сейчас заключается в том, что сервер разработки create-react-app обслуживает порт 3002, а сервер Express - 3001. Поэтому в режиме разработки запрос должен быть сделан из одного источника из порта 3002 в порт 3001, который требует абсолютного URL. Но в работе приложение React создается и разворачивается на моем сервере Express, что означает, что теперь запрос должен быть выполнен на 3001 или того же источника. Поэтому я хочу, чтобы это работало в разработке и производстве без необходимости каждый раз менять URL. Кроме того, я знаю, что это обычно не было бы проблемой вообще, если бы у меня было доменное имя для псевдонима портов, но это приложение сделано полностью для обслуживания и использования в локальной сети, а не в сети. Поэтому мне все еще нужно указать порты.
Сейчас я пытаюсь сгенерировать такой URL, но он загружается асинхронно, потому что приложение React начинает работать и выдает ошибки из-за отсутствия API Google. Однако в инспекторе я вижу, что API Google успешно импортируется, всего через несколько секунд после загрузки приложения.
<script>
(function(d, script) {
script = d.createElement('script');
script.type = 'text/javascript';
script.async = false;
script.src = 'http://' + window.location.hostname + ':3001/api/util/googleAPI';
d.getElementsByTagName('head')[0].appendChild(script);
}(document));
</script>
Можно ли как-нибудь синхронно загрузить вставленный тег сценария или, возможно, отложить React до завершения загрузки сценария?