Issue: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

My problem is that I can't access to GET method from my Angular app because of the issue:

Access to XMLHttpRequest at 'https://localhost:44337...' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

1. ConfigureServices method has the line for adding Cors:

services.AddCors();

2. Configure method has the code for configuring Cors:

app.UseCors(builder =>
  builder.WithOrigins("http://localhost:4200")
  .AllowAnyHeader()
  .AllowCredentials()
  .AllowAnyMethod());

It's been using before such methods:

 app.UseHttpsRedirection();
 app.UseDefaultFiles();
 app.UseStaticFiles();

 app.UseRouting();

 app.UseAuthentication();

 app.UseAuthorization();

What else should be done to prevent that issue? *I'm using ASP.NET Core 3.1

Thanks in advance for any suggestions!

UPD: My middlewares order is:

 
   app.UseSwagger();

   app.UseSwaggerUI(c =>
   {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "My Api V1");
   });

    app.UseCors(builder =>
    builder.WithOrigins("http://localhost:4200")
   .AllowAnyHeader()
   .AllowCredentials()
   .AllowAnyMethod());


 app.UseHttpsRedirection();
 app.UseDefaultFiles();
 app.UseStaticFiles();

 app.UseRouting();

 app.UseAuthentication();

 app.UseAuthorization();

 app.UseEndpoints(endpoints =>
 {
     endpoints.MapControllers();
 });

My API method:

[HttpGet]
public async Task<string> GetRole(string token)
{
   try
   {
      var tokenHandler = new JwtSecurityTokenHandler();
      var securityToken = (JwtSecurityToken)tokenHandler.ReadToken(token);
      var claimValue = securityToken.Claims.FirstOrDefault(c => c.Type == "role")?.Value;
      return await Task.FromResult<string>(claimValue);
   }
   catch (Exception)
   {
      return null;
   }
}

Answer 1

You should rearrange your middlewares as follows:

 app.UseHttpsRedirection();

 app.UseRouting();

 app.UseCors(builder =>
 builder.WithOrigins("http://localhost:4200")
 .AllowAnyHeader()
 .AllowCredentials()
 .AllowAnyMethod());

 app.UseDefaultFiles();
 app.UseStaticFiles();

 app.UseAuthentication();

 app.UseAuthorization();

 app.UseEndpoints(endpoints =>
 {
     endpoints.MapControllers();
 });

UseHttpsRedirection should be first of your middlewares, and UseCors should be before UseAuthentication/UseAuthorization, but after UseRouting.
Have a look at the docs

Answer 2

for .Net5 above, to sort this out in your code instead of AllowAnyOrigin, it should be .SetIsOriginAllowed(origin => true). This has the same effect as allowAnyOrigin. Please also take note of Order/Sequence. It should be as in the screenshort. Literally CORS should be the first service in your startup.

*Code it as follows*

//ENABLE CORS

  services.AddCors(options =>
  {
    options.AddPolicy("EnableCORS", builder =>
          {
            builder.WithOrigins().AllowAnyMethod().AllowAnyHeader().SetIsOriginAllowed(origin => true) // allow any origin
           .AllowCredentials().Build(); 
          });
  });