Solving my CORS-Problem in Azure with standard features?

Question

the following components describe my solution in Azure which I want to bring to work:

Client: The clients are common Browsers from anonymous users all over the internet that are making ajax requests to the backend server which is generelly a simple web api which is implemented with .NET Core.

Azure Web App 1: This azure web app is the frontend app consisting of static html and java script files.

Azure Web App 2: This azure web app is the backend app which is implemented in .NET Core and serves the web api interface.

In general, the browser is served with the static content by Azure Web App 1 and wants to execute an Ajax request to the azure Azure Web App 2. This does currently not work because I get a CORS error. Needless to say, because the clients are anonyous browsers, I do not konw their IP addresses.

Can anyone tell me what I have to do in Azure so that this scenario is going to work? I explicitly want to separate the frontend app from the backend app and deploy them independently on different Azure Web Apps. I think this should be a common scenario and hope that there are easy ways to get these scenario work.

Thank you to all the guys who try to help me with this challenge!

Best regards!

Look this answer can help you https://stackoverflow.com/a/70675328/6727650 — César Augusto, Jan 12 '22 at 01:34

score 0 · Answer 1 · answered Sep 21 '21 at 16:40

As I understand, you want to create a multitier application (screenshots below), in which the API back-end apps can be accessed only from the front-end tier.

You can use combination of networking features available in App Service to accomplish your scenario. Namely, Regional VNET and Service/Private endpoints. With App Service networking features, you can control traffic going to your backend app.

Also, on App Service, you could have those two separate apps in the same App Service Plan (ASP), since you pay only for ASP, saving costs.

-Just to highlight, you can continue to add apps to an existing plan as long as the plan has enough resources to handle the load. The apps in the same App Service plan all share the same compute resource.

Also, see this doc for the flow/process for this setup: Create two web apps connected securely with Private Endpoint and VNet integration

Referenced from this doc App Service networking features- screenshots and use cases.

Thank you very much for your answer and your explanations! Meanwhile, I found an easy solution with no need of addittional services or networks. But I agree with you: A secure production application for the backend should be hardened and placed into a private virtual network to have better control over the network traffic and so on. — Thorsten Kraus, Sep 22 '21 at 11:09

score -1 · Answer 2 · answered Sep 22 '21 at 11:08

I found an easy way to resolve my problem. So for my scenario, I do not need any additional services or components like the Azure application gateway.

My solution is related to https://learn.microsoft.com/de-de/aspnet/core/security/cors?view=aspnetcore-5.0.

First the ASP.NET core web api needs the following Code in 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);

        ...
    }

But in Azure, this is still not enough. Secondly, the allowed origins must also be declared in the CORS section of the Azure web app. I did this through the Azure Portal:

I have a Azure static web app for my angular app. And also API in Azure using APIM service. I have tired this approach and it is still giving me CORS issue — nmess88, Aug 09 '22 at 05:26

Solving my CORS-Problem in Azure with standard features?

2 Answers2