Asp.net Core: Cross-Origin Request Blocked - reactjs

Question

I am using react as a front-end and asp.net core as a back-end. I am using fetch API for API request but I am getting Cors error on the browser console saying: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:44316/api/auth/register. (Reason: CORS request did not succeed).
My ConfigureServices method is:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("myPolicy", builder =>
{
builder.WithOrigins("http://localhost:3000")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});
services.AddSignalR();
services.AddDbContext<UserContext>(options => options.UseSqlServer(Configuration.GetConnectionString(name: "Default")));
services.AddControllers();
services.AddScoped<IUserRepository, UserRepository>();
services.AddScoped<IJwtHelper, JwtHelper>();
}
And the Configure method is:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseCors("myPolicy");
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapHub<ChatHub>("/chat");
});
}
In react I created a form submit event and its looks like:
const submitRegisterForm = async (e) => {
e.preventDefault();
await fetch(
"https://localhost:44316/api/auth/register",{
method: 'POST',
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
name,
email,
password,
role,
})
});
setRedirectTo(true);
};
This the output I am getting in Brower network tab:

Answer 1

Try as follows
In your ConfigureServices method
services.AddCors(options =>
{
options.AddPolicy("ClientPermission", policy =>
{
policy.AllowAnyHeader()
.AllowAnyMethod()
.SetIsOriginAllowed(_ => true)
.AllowCredentials();
});
});
and in your Configure method
app.UseCors("ClientPermission");

Answer 2

On the client side for localhost request use http and not https
const submitRegisterForm = async (e) => {
e.preventDefault();
try {
const res = await fetch(
"http://localhost:44316/api/auth/register",{
method: 'POST',
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
name,
email,
password,
role,
})
});
setRedirectTo(true);
}
catch(err){
console.log(err)
}
};

Answer 3

The placement order codes in asp.net core v6 should be as follows in program.cs
app.UseCors(builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader());
app.UseAuthentication();
app.UseAuthorization();
Also in front and in jsx you should send the headers as follow:
"Content-Type": "application/json",
"Accept": 'application/json',
"authorization": "Bearer " + token,
"Access-Control-Allow-Origin": "*",