CORS Even After Enabling - reactjs

Question

I am developing a web application with react. To call the API's I am using HTTP triggers in Azure function apps. All the API's are working without an issue. I am in the integrating process. I came across this CORS issue. I have tried to overcome this but I am still getting the same error. and I dont have an express.js
Program.cs
var builder = WebApplication.CreateBuilder(args);
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(
policy =>
{
policy.WithOrigins("http://localhost:3000");
});
});
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddDbContext<EmployeeDBContext>(options => options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB")));
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseCors();
app.UseAuthorization();
app.MapControllers();
app.Run();
ReactApp
const makeAPICall = async () => {
try {
const response = await fetch('http://localhost:7182/api/GetEmployees', {mode:'cors'});
const data = await response.json();
console.log({ data })
}
catch (e) {
console.log(e)
}
}
useEffect(() => {
makeAPICall();
}, [])
return (
<div className="App">
<h1>React Cors Guide</h1>
</div>
);
}
Updated
I found out that the problem is Missing Header.

Answer 1

Middlewares like this have to be places in the pipeline in correct order and sometimes other middlewares have to be enabled
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/middleware/?view=aspnetcore-7.0#middleware-order
According to your issue, it seems that app.UseRouting() is missing (may be something else, article above definitely knows it better)