我知道这是一个非常常见的问题，并且已经有很多关于它的文章。尽管在网上阅读了大量内容，但我找不到合适的解决方案。
我有一个完全公开的网站 - 没有登录/安全区域。整个网站由对各种第 3 方网站的 API 调用提供支持。该网站在前端使用 React。 React 需要调用 API 来为网站提供支持。
因此，问题在于保护 API key 。
简单的解决方案 1。
React 使 API 调用直接到第三方 API - 类似 https://api.someservice.com/endpoint?key=API-KEY
显然这不好，因为它暴露了 API-KEY。
解决方案 2。
每个人都建议在自己的服务器上创建一个服务，并从那里向第三方进行 API 调用。这样您就不必公开 API-KEY。因此 React 会进行类似 https://api.myserver.com/endpoint 的调用
然后该服务将调用第三方服务并返回结果。问题是，其他人可以调用我服务器上托管的端点并使用它 - 有效地使用我的 API-KEY。
所以，问题是，我如何确保我(我的 React 应用)是唯一可以调用我的服务器上托管的 API 服务的人？
----使用附加信息进行编辑。----
基本上显示 map 并叠加信息。当用户滚动 map 时，会异步进行 API 调用，并将与显示位置相关的信息叠加到 map 上。没有输入表单，没有提交，只有用户导航 map 时持续不断的异步 API 调用流。
我需要保护这些 API 调用。没有表单提交或任何类型的登录/身份验证。该网站向所有人开放。
最佳答案
我遇到了与您相同的问题，我打算做的是将 dotnet core 与 SPA 和服务器端渲染结合使用。就我而言，我使用的是 Angular，但他们确实已经准备好使用 React 和 React + Redux 模板。
通过这种组合，您的 React 应用程序将在 MVC 应用程序内运行。这意味着您可以拥有一个代理 API，它只接受来自本地主机的请求(记住您有 SSR)，并且您可以从该 API Controller 调用其他 API。您的 key 将是安全的，因为它们只会由您的 C# Controller (即您的中间人)使用。实际的信息交换将在服务器之间完成
( Source )
关于Javascript - 保护 API key ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48651587/