ASP.NET Core: how do I configure CORS for my React frontend?

Question

My React app on `http://localhost:5173` gets `blocked by CORS policy` when calling my ASP.NET Core API on `https://localhost:7001`.

Accepted Answer

Register a named policy and apply it **before** auth and endpoints:

```csharp
builder.Services.AddCors(o => o.AddPolicy("Frontend", p => p
    .WithOrigins("http://localhost:5173", "https://app.example.ht")
    .AllowAnyHeader()
    .AllowAnyMethod()
    .AllowCredentials()));

var app = builder.Build();
app.UseCors("Frontend");
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();
```

Notes:
- `AllowCredentials()` (for cookies) can't be combined with `AllowAnyOrigin()`. List the origins explicitly.
- Put the origins in configuration (`appsettings.{Environment}.json`) so production doesn't allow localhost.
- In development, a Vite proxy (`server.proxy` in `vite.config`) avoids CORS entirely.

1 réponse