'隱藏作為 REACT 道具的 API 密鑰

Question

我正在構建一個帶有標記的 Google Map 組件。 根據文檔，我需要將組件包裝在Wrapper中，並將我的 API 密鑰作為道具傳遞，如下所示：

<Wrapper apiKey="My-API-key-comes-here" render={render}>
    <GoogleMap />
</Wrapper>

雖然我設法通過從后端調用它們來隱藏 API 調用自己的密鑰（我也使用地理編碼 API），但我不知道如何隱藏作為道具的 API 密鑰。

我試過了：

<Wrapper apiKey={process.env.GOOGLE_API_KEY} render={render}>
    <GoogleMap />
</Wrapper>

這不起作用，也不是真正的修復，因為 API 鍵仍然可以從前端捏住。

谷歌在他們的例子中是這樣的：

<Wrapper apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY!} render={render}>
    <GoogleMap />
</Wrapper>

當我嘗試這個時，我收到以下錯誤：

File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|         columnNumber: 9
|       }, this), /*#__PURE__*/_jsxDEV(Wrapper, {
>         apiKey: import.meta.env.GOOGLE_API_KEY,
|         render: render,
|         children: /*#__PURE__*/_jsxDEV(GoogleMap, {}, void 0, false, {

這是谷歌的沙箱： https://codesandbox.io/embed/github/googlemaps/js-samples/tree/sample-react-map

任何人都有一個安全可靠的好習慣嗎？

非常感謝！

Answer 1

只需使用谷歌 map 生成器https://google-map-generator.com/