如何使用 React-Leaflettilelayer 的访问令牌而不将其暴露在前端？

Question

这是需要访问令牌的 React Leaflet TileLayer 组件的样子：

<TileLayer
  url='https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=1234567890'
  attribution='<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/>

但是即使我使用 .env 文件中的环境变量，例如

const jawgAccessToken = import.meta.env.VITE_JAWG_TOKEN

<TileLayer
  url=`https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=${jawgAccessToken}`
  attribution='<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/>

而不是硬编码它，它仍然会暴露，因为我的 React 组件位于前端。 如何在不暴露我的秘密令牌的情况下访问此瓦片层？

我正在考虑从前端到后端进行中继，例如将 TileLayer 组件中的 url 替换为后端的 url，其中我通过向 Jawg url 发出 GET 请求然后返回来处理 GET 请求到前端。但我怀疑这是否足够，而且这似乎是一个足够常见的问题（肯定其他人需要使用tilelayer访问令牌而不暴露它们？）我希望有人能够对此问题提供最佳实践答案。

谢谢！

Answer 1

看起来“最佳实践”答案是在创建访问令牌时添加 URL 限制