CORS error when connecting ASP.NET Core backend API to React frontend

Question

I am encountering a CORS (Cross-Origin Resource Sharing) error while attempting to connect my ASP.NET Core backend API to a React frontend. Despite configuring CORS policies in my backend, I am still experiencing this error:

"Access to fetch at 'https://example.com/api/data' from origin 'https://medvent.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I have already tried various configurations in my Program.cs file, including explicitly allowing any origin using .AllowAnyOrigin(), but the CORS error persists.

Can someone please guide me on what I might be missing in my CORS configuration or suggest any additional steps I need to take to resolve this CORS error? Any help would be greatly appreciated!

Additional Details:

ASP.NET Core version: 6.0 React version: 18 I am deploying the backend API and frontend separately, hosting them on different domains. I am using Microsoft Azure for hosting my ASP.NET Core backend API.

Thank you in advance for your assistance!

I have set up the CORS configuration in my Program.cs file as follows:

var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins, builder =>
    {
        builder.WithOrigins("https://medvent.azurewebsites.net").AllowAnyMethod().AllowAnyHeader().AllowCredentials();
    });
});
var app = builder.Build();
app.UseSwagger();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseCors(MyAllowSpecificOrigins);
app.UseAuthorization();
app.UseSession();
app.MapControllers();
app.Run();