azure - 前端应用程序服务在具有专用终结点的 VNet 中调用后端应用程序服务会返回 403 IP 禁止错误

Question

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

总结(下面包含 Bicep 文件路径的版本)

为此，我创建了:

• 1 个前端应用服务
• 1 个后端应用服务
• 1 个具有 2 个子网的 VNet:
  • 1 个专用端点的 1 个子网
  • 前端应用服务的 1 个子网
• 1 Private DNS Zone用于专用端点路由(创建专用端点时自动创建)

我做了以下配置:

• 应用服务前端 > 网络 >
  • 访问限制:允许公共(public)访问
  • VNet 集成:将应用服务添加到之前创建的子网
• 应用服务后端 > 网络 > 访问限制:允许公共(public)访问，但“拒绝”所有“不匹配的规则操作”。我添加了一条允许访问前端子网的规则(操作:允许，类型:选择 VNet，子网:选择前端所在的子网)Like this
• 应用服务后端 > CORS:添加了前端 URL

结果

在我的前端，我向后端 API 发出 HTTP 请求。后端回复我 ERR_FAILED 403 (Ip Forbidden)。在响应 header 中，我看到“x-ms-forbidden-ip: xxx.xxx.xx.xx”(我的电脑所在的公司网络的公共(public) IP)。 See here 。我不应该看到我的前端应用服务 IP 吗？

仅供引用，如果在“应用服务后端”>“网络”>“访问限制”中，我添加一条授权我公司的公共(public) IP 的规则，则该请求将返回代码 200，而不再是 403。

如何阻止对后端的公共(public)访问，但仍设法执行来自前端的请求？ (经过多次研究，我还没有找到任何成功的答案来解决这个问题)。

带有二头肌文件的版本

我关注了这个tutorial 。文章末尾提供了 Bicep 文件。

所以我做了以下事情:

• az group create --name SecureNTierApp --location "France Central"
• az deployment group create --name DeployementSecureNTierApp --resource-group SecureNTierApp --template-file <file-name>.bicep
• 重新激活基本身份验证以使用 Azure DevOps 进行部署:
  • az resource update --resource-group SecureNTierApp --name scm --namespace Microsoft.Web --resource-type basicPublishingCredentialsPolicies --parent sites/<frontend-name> --set properties.allow=true
  • az resource update --resource-group SecureNTierApp --name scm --namespace Microsoft.Web --resource-type basicPublishingCredentialsPolicies --parent sites/<backend-name> --set properties.allow=true
  • 在访问限制 > 高级工具网站(在两个应用服务上):添加新规则(操作:允许，类型:服务标签，服务标签:AzureCloud)
• 应用服务后端 > CORS:添加了前端 URL
• 请注意，bicep 文件将后端 > 网络 > 访问限制配置为允许公共(public)访问:false

Answer 1

据我所知，您的 Azure 环境设置正确。我怀疑 Angular 前端中的代码要求您的网络浏览器直接调用后端。您可能希望浏览器对前端进行调用，然后将其路由或传递到后端。

您可以通过在使用浏览器访问网站的计算机上运行 Wireshark 来确认当前行为。您将看到流量流向您的后端 IP。