如何正确代理对 Google Maps Embed API 的请求？答案

【问题标题】：How do I properly proxy a request to the Google Maps Embed API?如何正确代理对 Google Maps Embed API 的请求？
【发布时间】：2022-01-14 04:02:45
【问题描述】：

我正在尝试使用Google Maps Embed API 嵌入与用户输入的地址匹配的地图。按照开发者指南，我获得了一个 API 密钥来添加到我的 API 请求中。当我通过我的 React 客户端中 iframe 的“src”属性请求地图时，我能够成功地调出地图，如下所示：

<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 您要授权的网址：http://127.0.0.1:3001/api/maps?parameters=[my_encoded_parameters]

我目前只是在本地开发，所以我尝试按照错误文档的建议将http://127.0.0.1:3001/* 注册为授权 URL，并且我还尝试删除 API 密钥上的所有网站限制以查看如果我授权了错误的 URL，但是这两种尝试仍然产生相同的错误。

除了this Google Codelabs project 之外，我没有找到很多关于设置代理的资源，但我无法从中挑选任何东西来帮助解决这个问题。

这是我在 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}`;
    };
}

我在 Docker 容器中运行我的 React 前端和我的 Node.js 后端。

我的最佳猜测是我缺少 Maps API 所期望的请求标头，但我还没有找到任何相关文档，或者我可能误解了更基本的东西。任何指导将不胜感激。

【问题讨论】：

限制您的 API 密钥。文档中也对此进行了说明。

标签： node.js reactjs docker iframe google-maps-embed

【解决方案1】：

没有办法保护您在网站上的 google maps 密钥不被“窥探”，因为它始终是公开的。保护您的密钥免受外国使用的唯一方法是限制它仅访问允许的域/IP 地址 - 因此，如果它是从其他人那里使用的，它将无法工作或从您的信用中获取任何东西（谷歌会显示一个错误消息）。

https://developers.google.com/maps/documentation/javascript/get-api-key

【讨论】：