配置 React 通过前端 IP 而不是客户端 IP 发出 HTTPS 请求

Question

我正在尝试保护部署在 Azure 中的应用程序的安全，该应用程序由 React 前端和 Python 后端组成。我希望前端可以通过互联网访问，不像后端只能从前端访问（不能通过互联网访问）。后端似乎通过获取客户端的 IP 而不是前端的 IP 来限制访问，这会导致 403 IP Forbidden 错误。

为此，我创建了：

• 1 前端应用服务
• 1 个后端应用服务，允许从虚拟网络内部访问
• 1 虚拟网络：
  • 1 个专用端点的 1 个子网，后端附加到该端点
  • 1 个前端应用服务子网

我的老板建议切换到 Next.js，但这需要 2-3 周，而且我什至不确定这是否能解决问题。我相信这必须更容易，只是我缺少一些东西。

Answer 1

配置 React 通过前端 IP 而不是客户端 IP 发出 HTTPS 请求

您可以通过将 vnet 与应用服务集成来将对后端 API 的访问限制为受信任的来源。

首先创建 VNet 并将应用服务与 VNet 集成，同时使用专用端点为 Azure 应用服务启用 VNet 集成。

现在使用与用于 Web 应用程序集成的相同 vnet 连接应用程序服务

为了建立从前端到后端应用程序的连接，您应该使用相同的 vnet 使用 vnet 集成创建后端专用端点和前端应用程序，以便您能够进行从前端到后端的通信

如果您想通过公共 IP 发送流量，您可以通过将其附加到前端子网来创建 natgateway。

参考：

启用 Azure 专用链接后端和前端连接 - Azure Databricks |微软学习

如何设置Azure静态Web应用程序和Azure应用程序服务之间的访问控制？ - 堆栈溢出