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

Question

当考虑到我的 react-application 需要 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 密钥暴露给最终用户。

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

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

Answer 1

您必须在您的 Express 服务器中禁用 CORS。这意味着除了您的前端之外，没有其他客户端可以向您的 Express 服务器发送请求。然后，虽然您对快速服务器的授权已公开，但除非请求来自您的前端应用程序，否则它无济于事。