从浏览器调用反向地理编码 API 时如何限制 API Key？

Question

我正在使用浏览器中的Google 反向地理编码 API。

在没有限制地使用 API Key 时，API 工作正常。例如：https://maps.googleapis.com/maps/api/geocode/json?key=API_KEY_WITH_NO_RESTRICTION&latlng=41.8857156,-87.64823779999999- 好的

但当我从浏览器调用 API 时，我想限制 API 密钥，最好是来自某些域的请求。

现在，根据限制指南，HTTP Referer 限制不适用于地理编码 API（Google Web 服务 API 之一）。它返回错误“具有引用限制的 API 密钥不能与此 API 一起使用。” 在这种情况下！

另一种选择是使用IP 地址限制。但如果呼叫是从服务器发出的，它似乎更合适。在这种情况下，可以在限制中添加服务器地址。

如果我想继续从浏览器调用地​​理编码 API，如何保护（限制）API 密钥？

Answer 1

我发现我必须使用Maps Javascript API才能从浏览器（客户端）调用反向地理编码（地址查找），并为 API 密钥设置HTTP Referer 限制。

在我最初的实现中，我fetch(requestUrl)从浏览器中使用，因为它看起来非常方便，但最终出现了上述问题。

示例（使用 TypeScript）：

1. 启用地图 Javascript API

2. 安装所需的包

npm install @googlemaps/js-api-loader
npm i -D @types/google.maps

3. reverseGeo.ts

npm install @googlemaps/js-api-loader
npm i -D @types/google.maps

4. reverseGeo.spec.ts

import { reverseGeo} from './reverseGeo';

it('should test reverseGeo', async () => {
  console.log(reverseGeo(22.5726, 88.3639));
});