Blocked by CORS policy: No 'Access-Control-Allow-Origin in .NET Core 7 Web API

Question

I have used .NET Core 7.0 for the backend project. I also used React on the user side.

I did all the settings as per the documentation. But I get an error:

Access to XMLHttpRequest at 'http://x.x.x.x:1402/api/auth/login' from origin 'http://x.x.x.x:1400' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My Startup.cs class:

public Startup(IConfiguration configuration)
{
    Configuration = configuration;
}

public IConfiguration Configuration { get; }

public void ConfigureServices(IServiceCollection services)
{
    // Add for Remove null fields from API JSON response
    services.AddMvc()
        .AddJsonOptions(options =>
        {
            options.JsonSerializerOptions.DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull;
        });

    // AddAutoMapper
    services.AddAutoMapper(typeof(Startup));

    services.AddControllers(config =>
        {
            config.Filters.Add(new ApiExceptionFilter());
            config.Filters.Add(new ApiActionFilter());
            config.Filters.Add(new ApiResultFilter());
        });

    ServiceRegistration.AddInfrastructure(services);

    string key = "xxxxxxxxxx";
    services.AddAuthentication(x =>
        {
            x.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
            x.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
        }).AddJwtBearer(x =>
        {
            x.RequireHttpsMetadata = false;
            x.SaveToken = true;
            x.TokenValidationParameters = new Microsoft.IdentityModel.Tokens.TokenValidationParameters
            {
                ValidateIssuerSigningKey = true,
                ValidateIssuer = false,
                ValidateAudience = false,
                IssuerSigningKey = new SymmetricSecurityKey(Encoding.ASCII.GetBytes(key)),
                ValidAudience = Configuration["Tokens:Audience"],
                ValidIssuer = Configuration["Tokens:Issuer"],
                ValidateLifetime = true,
                ClockSkew = TimeSpan.Zero
            };
        });

    services.AddSingleton<IJwtAuth>(new Auth.Auth(key));
    services.AddSwaggerGen(c =>
        {
            OpenApiSecurityScheme jwtSecurityScheme = new OpenApiSecurityScheme
            {
                Scheme = "bearer",
                BearerFormat = "JWT",
                Name = "JWT Authentication",
                In = ParameterLocation.Header,
                Type = SecuritySchemeType.Http,
               
                Reference = new OpenApiReference
                {
                    Id = JwtBearerDefaults.AuthenticationScheme,
                    Type = ReferenceType.SecurityScheme
                }
            };
            c.SwaggerDoc("v1", new OpenApiInfo
            {
                Version = "v1",
            });
            c.AddSecurityDefinition(jwtSecurityScheme.Reference.Id, jwtSecurityScheme);
            c.AddSecurityRequirement(new OpenApiSecurityRequirement
            {
                { jwtSecurityScheme, Array.Empty<string>() }
            });

            string xmlFilename = $"{Assembly.GetExecutingAssembly().GetName().Name}.xml";
            c.IncludeXmlComments(Path.Combine(AppContext.BaseDirectory, xmlFilename));
        });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // My Custom Middleware
    app.UseMainMiddleware();

    app.UseCors(
            options => options
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowAnyOrigin()
        );

    app.UseHttpsRedirection();
    app.UseAuthentication();
    app.UseRouting();
    app.UseAuthorization();

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

    //app.UseMvc();
}

Answer 1

as stated in https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-7.0 app.UseCors() should be placed after app.UseRouting()