使用标准功能在 Azure 中解决我的 CORS 问题？

Question

以下组件描述了我想在 Azure 中使用的解决方案：

客户端：客户端是来自互联网上匿名用户的普通浏览器，它们向后端服务器发出 ajax 请求，后端服务器通常是一个简单的 Web api，使用 .NET Core 实现。

Azure Web App 1：这个 azure Web 应用程序是由静态 html 和 java 脚本文件组成的前端应用程序。

Azure Web App 2：这个 azure Web 应用程序是在 .NET Core 中实现的后端应用程序，提供 Web api 接口。

一般来说，浏览器由 Azure Web App 1 提供静态内容，并希望向 azure Azure Web App 2 执行 Ajax 请求。这目前不起作用，因为我收到了 CORS 错误。不用说，因为客户端是匿名浏览器，我不知道他们的 IP 地址。

谁能告诉我我必须在 Azure 中做什么才能使这种情况生效？我明确希望将前端应用程序与后端应用程序分开，并将它们独立部署在不同的 Azure Web 应用程序上。我认为这应该是一个常见的场景，并希望有简单的方法可以让这些场景发挥作用。

感谢所有试图帮助我应对这一挑战的人！

最好的问候！

Answer 1

我找到了解决问题的简单方法。因此，对于我的场景，我不需要任何额外的服务或组件，例如 Azure 应用程序网关。

我的解决方案与https://docs.microsoft.com/de-de/aspnet/core/security/cors?view=aspnetcore-5.0有关。

首先，ASP.NET 核心 web api 需要 Startup.cs 中的以下代码：

public void ConfigureServices(IServiceCollection services)
    {
        var origins = new List<string>
        {
            "https://xxx-apifrontend.blob.core.windows.net/",
            "https://127.0.0.1:5500",
            "https://localhost:5500"
        };

        services.AddCors(options =>
        {
            options.AddPolicy(name: MyAllowSpecificOrigins,
                builder =>
                {
                    builder.WithOrigins(origins.ToArray())
                        .AllowAnyMethod()
                        .AllowAnyHeader()
                        .SetIsOriginAllowed((host) => true);
                });
        });

        ...
    }

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        ...

        app.UseRouting();

        app.UseCors(MyAllowSpecificOrigins);

        ...
    }

但在 Azure 中，这还不够。其次，还必须在 Azure Web 应用程序的 CORS 部分中声明允许的来源。我通过 Azure 门户做到了这一点：

Answer 2

据我了解，您希望创建一个多层应用程序（如下截图），其中 API 后端应用程序只能从前端层访问。

您可以使用应用服务中可用的网络功能组合来完成您的方案。即，区域 VNET 和服务/私有端点。借助应用服务网络功能，您可以控制流向后端应用的流量。

此外，在应用服务上，您可以将这两个单独的应用包含在同一个应用服务计划 (ASP) 中，因为您只需为 ASP 付费，从而节省成本。

-只是强调一下，只要计划有足够的资源来处理负载，您就可以继续将应用程序添加到现有计划中。同一应用服务计划中的应用都共享相同的计算资源。

另外，请参阅此文档了解此设置的流程/过程： Create two web apps connected securely with Private Endpoint and VNet integration

引用自此文档App Service networking features- 屏幕截图和用例。