Как интегрировать API обмена валюты для получения курсов в реальном времени в JavaScript ⇐ JAVA

[Anonymous]

Я пытаюсь интегрировать Currencylayer API на свой веб-сайт, чтобы получать обменные курсы различных валют в режиме реального времени.
Моя цель — динамически отображать конвертированные значения валют на моем веб-сайте, например конвертировать доллары США в евро, INR или фунты стерлингов для пользователей на основе их предпочтений.
Из документации я понимаю, что мне нужно отправить такой запрос:

Код: Выделить всё

http://api.currencylayer.com/live?access_key=YOUR_ACCESS_KEY

API возвращает данные обменного курса в формате JSON, включая валютные пары, такие как USDINR, USDEUR и другие.
Что я пробовал
Я попытался вызвать API с помощью JavaScript:

Код: Выделить всё

const access_key = "YOUR_ACCESS_KEY";

fetch(`http://api.currencylayer.com/live?access_key=${access_key}`)
.then(response => response.json())
.then(data => {
console.log(data);
document.getElementById("output").innerHTML = data.quotes.USDINR;
})
.catch(error => console.error(error));

Ожидаемый результат
Обменный курс (например, доллар США к INR) должен отображаться на веб-странице.
Фактический результат
На странице ничего не отображается, или иногда возникают такие ошибки, как:

• Запрос на блокировку политики CORS
• Ошибка смешанного содержимого (HTTP и HTTPS)
• Неопределенные данные в ответе

Вопросы
Как правильно вызвать API Currencylayer из внешнего интерфейса?
Нужно ли мне использовать HTTPS или внутренний прокси, чтобы это работало правильно?
Как защитить свой ключ API и избежать раскрытия его в коде внешнего интерфейса?
Есть ли способ динамически конвертировать валюты (например, доллары США в INR) с помощью ответа API?>