Как правильно проксировать запрос к Google Maps Embed API?

Question

Я пытаюсь использовать Google Maps Embed API , чтобы встроить карту, соответствующую адресу, который вводит пользователь. Следуя руководству разработчика, я приобрел ключ API, чтобы добавить его к своим запросам API. Я могу успешно открыть карту, когда я запрашиваю ее через атрибут «sr c» iframe в моем клиенте React, например:

<iframe
   ...
   src={`https://www.google.com/maps/embed/v1/${mode}?key=${apiKey}&q=${encodedAddressQuery}`}
>

Но при этом мой ключ API остается открытым. клиенту.

В Google's API Key Best Practices рекомендуется хранить ключ API в переменной среды и использовать прокси-сервер для защиты ключей. Однако, когда я пытаюсь проксировать запрос (код ниже), кажется, что он возвращает соответствующую карту на долю секунды, но затем iframe заменяет карту сообщением «Ой! Что-то пошло не так», и в консоли браузера отображается эта ошибка:

Карты Google JavaScript Ошибка API: UnauthorizedURLForClientIdMapError https://developers.google.com/maps/documentation/javascript/error-messages#unauthorized -url-for-client-id-map-error URL-адрес вашего сайта для авторизации: http://127.0.0.1: 3001 / api / maps? Parameters = [my_encoded_parameters]

Сейчас я разрабатываю локально, поэтому я попытался зарегистрировать http://127.0.0.1: 3001 / * в качестве авторизованного URL-адреса, как указано в документации по ошибке, и я также попытался удалить все ограничения веб-сайта на ключ API, чтобы проверить, авторизовал ли я неправильный URL-адрес, но обе эти попытки по-прежнему приводили к одной и той же ошибке .

Я не нашел много ресурсов по настройке прокси, кроме этого проекта Google Codelabs , но я не смог ничего выбрать из него, чтобы помочь с эта проблема.

Вот код, который я использую в моем интерфейсе React:

<iframe
   ...
   src={`http://127.0.0.1:3001/api/maps?parameters=${encodedAddressQuery}`}
>

И в моем Express Node.js бэкенде:

router.get('/api/maps', async (req: Request, res: Response) => {
    try {
        const parameters = req.query.parameters;
        const map = await MapDataAccessObject.getOne(parameters);
        return res.status(OK).send(map.data);
    } catch (err) {
        ...
    }
});

export class MapDataAccessObject {

    public static async getOne(parameters: string) {
        const apiUrl = this.getMapsEmbedUrl(parameters);
        const map = await axios.get(apiUrl);
        return map;
    }

    private static getMapsEmbedUrl(parameters: string) {
        const encodedParams = encodeURI(parameters);
        return `https://www.google.com/maps/embed/v1/place?key=${process.env.MAPS_API_KEY}&q=${encodedParams}`;
    };
}

Я запускаю свой интерфейс React и свой Node.js бэкэнд в контейнерах Docker.

Думаю, мне не хватает заголовка запроса, который ожидает API Карт, но я не нашел документации по этому поводу, или, может быть, я неправильно понимаю что-то более фундаментальное. Будем очень признательны за любые рекомендации.