.NET 5 API add Access-Control-Allow-Origin headers - with Ionic 5.5 - asp.net-core

Question

Can you please assist, I have a .NET 5 Web API and Ionic 5.5 app. I have deployed the API and the Ionic app to Azure Web Services. The API is serving the Ionic app, so they are on the same domain - I can say same origin because the scheme, and domain are the same.
The issue is that, the Ionic app is failing to call the API because it seems like CORS is blocking it.
In my API, I have allowed any origin, any header and credentials but it's still not working. I have attached my Startup.cs file for the .NET 5 API.
Startup.cs code
using AutoMapper;
using EventManager.Business.Repositories;
using EventManager.Database;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Versioning;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.DependencyInjection.Extensions;
using Microsoft.Extensions.Hosting;
using Microsoft.OpenApi.Models;
using System;
using System.IO;
using System.Reflection;
namespace EventManager.Api
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddDefaultPolicy(
builder =>
{
builder.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});
//options.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
});
services.AddControllers();
services.AddApiVersioning(x =>
{
x.DefaultApiVersion = new ApiVersion(2, 1);
x.AssumeDefaultVersionWhenUnspecified = true;
x.ReportApiVersions = true;
// Supporting multiple versioning scheme
x.ApiVersionReader = new UrlSegmentApiVersionReader();
});
services.AddVersionedApiExplorer(options =>
{
options.GroupNameFormat = "'v'VVV";
options.SubstituteApiVersionInUrl = false;
});
var mappingConfig = new MapperConfiguration(mc =>
{
mc.AddProfile(new Business.MappingProfile());
});
var mapper = mappingConfig.CreateMapper();
services.AddSingleton(mapper);
services.AddSwaggerGen(c =>
{
c.SwaggerDoc("v1", new OpenApiInfo
{
Title = "Event Manager API Documentation",
Version = "v1",
Contact = new OpenApiContact
{
Email = "eric#xxxxx.com",
Name = "Eric Smith",
Url = new Uri("https://www.xxxxx.org/")
},
Description = #"Used for as a self-service for event attendees.
To capture attendee details and print out attendee badges",
License = new OpenApiLicense
{
Name = "Use under LICX",
Url = new Uri("https://www.xxxxx.org/api/license"),
}
});
//Set the comments path for the Swagger JSON and UI.
var xmlFile = $"{Assembly.GetExecutingAssembly().GetName().Name}.xml";
var xmlPath = Path.Combine(AppContext.BaseDirectory, xmlFile);
c.IncludeXmlComments(xmlPath);
});
services.AddDbContext<AppDbContext>(x => x.UseSqlServer(Configuration.GetConnectionString("MSSqlConnection"),
b => b.MigrationsAssembly("EventManager.Database")));
services.TryAddSingleton<IHttpContextAccessor, HttpContextAccessor>();
services.AddScoped<EventRepository>();
services.AddScoped<AttendeeRepository>();
services.AddScoped<DesignationRepository>();
services.AddScoped<EntryQuestionRepository>();
services.AddScoped<EntryQuestionSectionRepository>();
//Sart: To serve angular app
services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp"; });
//End: To serve angular app
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "EventManager.Api v1"));
}
app.UseRouting();
app.UseCors(builder =>
{
builder
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();
});
app.UseAuthorization();
//Start: To serve angular app
app.UseDefaultFiles();
app.UseSpaStaticFiles();
//End: To serve angular app
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
//Start: To serve angular app
app.UseSpa(spa => { spa.Options.SourcePath = "ClientApp"; });
//End: To serve angular app
}
}
}
My API call from the Ionic app
headers = new HttpHeaders({
"Authorization": "Bearer " + "XXXXXXX",
"Content-Type": "application/json"
});
//environment.api = 'https://myazureappname.azurewebsites.net/api/'
get(cellNumber?: string): Observable<AttendeeGetModel[]> {
return this._http.get<AttendeeGetModel[]>(`${environment.api}v1/attendees?cellNumber=${cellNumber}`, { headers: this.headers });
}
**Error message from Firefox browser attached**
[![enter image description here][1]][1]

Answer 1

The error ERR_NAME_NOT RESOLVED typically means: Chrome cannot resolve the domain name which in most cases means you're using the wrong domain name or have a typo.
In your case it looks like your're using the wrong top level domain in your app. Postman = ".net", Your app = ".com".