使用 React 前端处理密钥保护 API 操作的正确方法是什么?

What is the proper way to handle key-secured API operations with a React front-end?

考虑到我的反应应用程序需要 API 密钥来访问它用于安全数据库上的 CRUD 操作的后端这一事实时,我遇到了这个问题:

https://create-react-app.dev/docs/adding-custom-environment-variables/

WARNING: Do not store any secrets (such as private API keys) in your React app!

我希望通过应用程序身份验证的用户能够执行这些操作,而不必将 API 密钥暴露给最终用户。

共同的共识似乎是创建一个中间层,即正确处理 enriching/forwarding 请求的快速服务器。但此时,如果我想针对中间层验证网络应用程序,就会出现同样的问题,最终以一种或另一种方式暴露原始安全 API 后端。

有没有办法保证前端应用程序和原始安全后端之间的“握手”?如果我需要访问代码库来这样做,我可以通过中间层来实现吗

你必须在你的 express 中禁用 CORS server.Thats 意味着除了你的前端,没有其他客户端可以向你的 Express 服务器发送请求。然后,虽然您对快速服务器的授权已公开,但除非请求来自您的前端应用程序,否则它不会有帮助。