Configuración CORS en .NET: solución al error

¿Te aparece un error de CORS al consumir tu API en .NET? Aquí verás cómo habilitar y organizar CORS en Visual Studio dentro de Program.cs, cuándo usar allow any header y any origin, y cómo crear una política con nombre para mantener el código limpio. Además, se plantea un reto para restringir orígenes con which origin y probar con React.js.

¿Qué es CORS y por qué bloquea tu API en .NET?

CORS significa cross-origin resource sharing. Controla quién puede consumir tu API. En las APIs de .NET, por defecto no hay configuración de CORS, así que se bloquea cualquier origen externo. Solo una app de escritorio local puede acceder, porque se ejecuta en la misma máquina y no cruza dominios.

• Bloqueo por defecto: cualquier origen externo recibe error de CORS.
• Excepción local: una app de escritorio sí accede porque no hay cambio de servidor.
• Encabezados y origen: debes permitir encabezados y especificar orígenes válidos.
• Producción: evitar any origin. Es mejor listar quién puede consumir la API.

¿Cómo habilitar CORS en Program.cs de forma rápida?

Primero registra CORS en la colección de servicios y aplica la configuración en el middleware. Para pruebas, se permite cualquier encabezado y cualquier origen. Luego ejecuta la API y confirma que el cliente ya puede cargar datos.

// En Program.cs
builder.Services.AddCors();

app.UseCors(policy =>
{
    policy
        .AllowAnyHeader()
        .AllowAnyOrigin();
});

• AddCors: registra dependencias y utilidades de CORS.
• UseCors: aplica la configuración concreta del middleware.
• AllowAnyHeader / AnyOrigin: útil para pruebas, no recomendable en producción.

¿Cómo crear una política con nombre y usarla en UseCors?

Organiza la configuración con una política de CORS nombrada. Así podrás reutilizarla y mantener el código legible.

// En Program.cs
var myAllowedOrigins = "myAllowedOrigins";

builder.Services.AddCors(options =>
{
    options.AddPolicy(myAllowedOrigins, policy =>
    {
        policy
            .AllowAnyHeader()
            .AllowAnyOrigin();
    });
});

app.UseCors(myAllowedOrigins);

• Variable global: myAllowedOrigins evita escribir el texto literal en varios lugares.
• AddPolicy: registra la configuración una sola vez.
• UseCors(nombreDePolítica): aplica la política por su nombre.

¿Por qué mejora la organización del proyecto?

• Centraliza la configuración de CORS en los servicios.
• Evita duplicar reglas y facilita cambios.
• Hace evidente qué política está activa en la app.

¿Cómo limitar orígenes con which origin y probar con React.js?

El objetivo real es especificar quién puede consumir la API. Se sugiere mover la configuración a app settings y usar el método which origin para permitir solo los orígenes requeridos. Puedes comentar temporalmente allow any origin y definir los dominios permitidos.

• Define los orígenes que sí deben acceder.
• Usa el método which origin para listarlos.
• Comenta allow any origin mientras pruebas la restricción.
• Ejecuta un minidemo en React.js (puerto 3000) y consume la API.
• Verifica que el cliente puede cargar datos sin problemas de CORS.

¿Quieres que revisemos tu configuración o el minidemo en React.js? Cuéntame qué orígenes necesitas permitir y qué resultado obtienes al consumir la API.