2

我正在尝试使用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 的 API Key Best Practices中，建议将 API 密钥存储在环境变量中，并使用代理服务器来保护密钥。但是，当我尝试代理请求（下面的代码）时，它似乎会在一瞬间返回适当的地图，但随后 iframe 将地图替换为“糟糕！出了点问题”消息，并且浏览器控制台显示此错误：

Google Maps 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_pa​​rameters]

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

除了这个 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 所期望的请求标头，但我还没有找到任何关于它的文档，或者我可能误解了更基本的东西。任何指导将不胜感激。

4

1 回答 1

0

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

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

于 2022-01-13T20:02:45.150 回答