CORS issue in Angular app deployed to Azure static web app

Question

I have an Angular app that is deployed to Azure static web app, and .NET core web api also deployed to Azure using APIM service. I am getting CORS issue when I launch the webpage and try to access the API.

I have added these code to my Startup.cs in web api:

In ConfigureServices

services.AddCors(options =>
        {
            options.AddPolicy(name: AllowSpecificOrigins, builder =>
            {
                builder.WithOrigins(Configuration.GetSection("CorsSettings:AllowedOrigins").Value.Split(","))
                .AllowAnyMethod()
                .AllowAnyHeader()
                .SetIsOriginAllowed((host)=>true);
            });
        });

And in Configure

        app.UseHttpsRedirection();

        app.UseRouting();

        app.UseCors(AllowSpecificOrigins);

        app.UseAuthentication();

        app.UseAuthorization();

I have also added the origin to the CORS in the API App Service.

I am still getting CORS issue when trying to access the API from the web app.

What am I missing?

Answer 1

You told us you are using Azure APIM, so please the cross-domain policies.

It should be blocked by apim, so your cors settings in web application will not work.

Official Doc:

API Management cross-domain policies