Как мне вызвать ключ Node / Express API (.env) в клиентском Javascript?

Question

Прямо сейчас я использую ключ API OpenWeatherMap в моем клиентском javascript для простого погодного приложения (Node / Express). Я знаю, что это не идеально вне разработки, поэтому я сделал npm install dotenv. На стороне сервера я могу получить и установить переменные env просто отлично в Node. Я могу видеть их, когда у меня получится console.log.

Как мне вызвать ключ API в моем JavaScript на стороне клиента? Например, в настоящее время мое погодное приложение имеет свою простую логику в файле с именем weather.js, а HTML-код использует weather.js.

В идеале я бы хотел назвать мой API как http://api.openweathermap.org/data/2.5/forecast/daily?lat=${lat}&lon=${lon}&units=metric&appid=${process.env.WEATHER_API_KEY}

Я знаю, что .envs находятся на стороне сервера, и вы должны что-то делать, чтобы это работало на стороне клиента. Здесь новый разработчик Node, который слишком много читал, и я думаю, что я запутался между requireJS, Browserify, модулями, .env и т. Д. ...

Answer 1

Вы не хотите, чтобы ваши ключи API (или другие секреты) были публичными.Использование их во внешнем интерфейсе сделает их видимыми при проверке страницы и в журнале сетевых запросов.Вам нужно хранить и использовать свои секреты на стороне сервера.

Создайте маршрут на своем бэкэнде (который вы защищаете от использования другими доменами, используя CORS ), который вызывает API погоды (используятокен хранится в .env на вашем сервере) и отправляет обратно данные.

Тогда ваш фронтенд попадет по этому маршруту.

Answer 2

Вы не хотите открывать свои ключи API для внешнего мира. Вы можете создать внутренний маршрут (/ api / keys), сделать его защищенным с помощью CORS и вызвать его из внешнего интерфейса.

Answer 3

Вам потребуется запросить ключ API с сервера.
Это может быть легко сделано путем создания простого маршрута в вашем бэкэнде, который вернет ключ в качестве ответа.

Если вы не хотите предоставлять свой ключ API (я рекомендую вам не предоставлять его), вы можете создать маршрут в своем бэкэнде, который будет вызывать WeatherAPI с использованием вашего ключа API, и клиент отправит HTTPS-запрос вашему бэкэнду, который затем создаст еще один HTTPS-запрос к WeatherAPI и отправит ответ обратно клиенту.