Access to fetch at 'API URL' from origin 'LOCALHOST' has been blocked by CORS po-CodePudding

im getting this error.

Access to fetch at 'API_URL' from origin 'LOCALHOST_OR_HEROKU_URL' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

i have followed the documentation to order my Middleware, and include whats necessary from this documentation. Here is my Program.cs file.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: "CORSPolicy",
        policy =>
        {
            policy.AllowAnyOrigin();
            policy.AllowAnyMethod();
            policy.AllowAnyHeader();
        });

});


builder.Services.AddControllers();

builder.Services
    .AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuerSigningKey = true,
            ValidateIssuer = false,
            ValidateAudience = false,
            ValidateLifetime = true,
        };
    });

// i have registered my services here

builder.Services.AddEndpointsApiExplorer();

var app = builder.Build();


// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseRouting();
app.UseCors("CORSPolicy");

app.UseAuthentication();
app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute("default", "{controller=values}/{action=get}  /{id?}");
});


app.MapControllers();

app.Run();

but im still getting that error from client side, and i dont know what im doing wrong.. please any help is appreciated. With thanks

CodePudding user response：

Make sure your client application calling the Web API has the correct url with https://scheme.

So localhost:6700/api should be called as https://localhost:6700/api.

Please check and confirm :)

CodePudding user response：

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Error message clear says what is wrong here.
This one requirement is well described in MDN article (Requests with credentials part).

The server must not specify the "*" wildcard for the Access-Control-Allow-Origin response-header value, but must instead specify an explicit origin; for example: Access-Control-Allow-Origin: https://example.com

If a request includes a credential (most commonly a Cookie header) and the response includes an Access-Control-Allow-Origin: * header (that is, with the wildcard), the browser will block access to the response, and report a CORS error in the devtools console.

Credentialed requests are requests that contain any cookie data (Cookie header) or any data in Authorization header.

So, highly likely solution would be replacing this line:

policy.AllowAnyOrigin();

by setting explicit origin allowed.