ASP .Net Core: Post API con Cors con cuerpo de solicitud que da 400 mala solicitud

Esta es una pregunta bastante repetida sobre SO y casi 7-8 preguntas ya contestadas pero las soluciones existentes no están funcionando para mí.

Cuando ejecuto el servidor con el mismo código sobre localhost, funciona bien. Pero no funciona después del despliegue y toda mi solicitud POST con el cuerpo da 400 errores de mala solicitud.

Frontend: Angular 7.x corriendo http://localhost:4200

Servidor: Asp .net Core 3.1 corriendo en la máquina Ubuntu en AWS via Nginx sobre Cloudflare servidor de dominio.

Startup.cs : Aquí estoy usando el middleware CORS predeterminado de ASP. También he intentado escribir un middleware personalizado y un método de extensión para entretener las solicitudes de CORS. También lo añadiré si necesitas ese flujo de código. Eso tampoco funcionó.

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

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        IdentityModelEventSource.ShowPII = true;

        services.AddLogging();

        services.AddCors();
        services.AddControllers().AddNewtonsoftJson();
        services.AddHealthChecks();

        services.AddDistributedMemoryCache();
        services.AddMemoryCache();

        services.AddEntityFrameworkNpgsql().AddDbContext();

        services.AddHttpClient();
        services.AddSession();

        services.AddScoped();

        services.AddSwaggerDocument();

        services.Configure(options =>
        {
            options.SuppressModelStateInvalidFilter = true;
        });
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseRequestResponseLogging();

        app.UseOpenApi();
        app.UseSwaggerUi3();

        app.UseSession();

        app.UseRouting();
        app.UseCors(builder => {
           builder.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();
        });

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapHealthChecks("/health");
        });
    }
}

PlaceOrderController.cs : El /placeOrder API no está funcionando. También probado con y sin FromBody atributo. El registro no se está imponiendo, pero en nginx access.log dice 400 código de estado.

public class PlaceOrderController : Controller
{
    private readonly ILogger logger;

    public PlaceOrderController(ILoggerFactory loggerFactory)
    {
        logger = loggerFactory.CreateLogger();
    }

    [HttpPost]
    [Route("/placeOrder")]
    public async Task PlaceOrder(OrderRequest body)
    {
        // this log is not getting printed
        logger.LogInformation("Hello world" + body.ToString());

        // rest of the code removed
    }
}

OrderRequest.cs : Este es el modelo para el cuerpo de solicitud POST. Como mi modelo contiene un campo con subrayado, he intentado con el serializador nativo System.Text.Serialization y Newtonsoft.Json también. Eso tampoco funcionó.

public class OrderRequest
{
    public OrderRequest()
    {
    }

    [JsonProperty("rate")]
    public double Rate;

    [JsonProperty("quantity")]
    public double Quantity;

    [JsonProperty("cashback_rate")]
    public string CashbackRate;

    public override string ToString()
    {
        return JsonConvert.SerializeObject(this);
    }
}

Sample Request Body : {"rate":12.0,"quantity":1.0,"cashback_rate":"enterprise"}

Por favor, ayuda. Cerca de 4 días laborables ya desperdiciados. :(

Gracias por adelantado.

Pregunta hecha hace 3 años, 4 meses, 27 días - Por geekglitcher1735


2 Respuestas:

  • Para solucionar el error de solicitud de mala solicitud 400 al realizar una solicitud POST en tu API ASP .Net Core con CORS, aquí hay algunas posibles soluciones que puedes probar:

    • Verificar la configuración CORS:
    - Asegúrate de que la configuración CORS en tu aplicación ASP .Net Core esté permitiendo las solicitudes desde el dominio correcto. En tu método ConfigureServices, estás agregando el middleware CORS con la configuración de permitir cualquier origen, método y encabezado. Sin embargo, es posible que debas ajustar esto para que permita específicamente las solicitudes desde http://localhost:4200 (tu frontend Angular).

    • Revisar la configuración de Cloudflare y Nginx:
    - Si estás utilizando Cloudflare y Nginx para enrutar el tráfico hacia tu servidor ASP .Net Core, asegúrate de que la configuración en estos servicios también esté permitiendo correctamente las solicitudes POST. Es posible que necesites ajustar la configuración de Cloudflare para permitir el tráfico desde tu frontend Angular y la configuración de Nginx para pasar las solicitudes correctamente al servidor ASP .Net Core.

    • Investigar el modelo de solicitud:
    - Verifica que el modelo OrderRequest esté siendo serializado correctamente al recibir la solicitud POST. Puedes intentar depurar el método PlaceOrder en tu controlador para verificar si el cuerpo de la solicitud se está mapeando correctamente al modelo OrderRequest.

    • Verificar posibles errores en el cliente:
    - Asegúrate de que el cliente esté enviando correctamente la solicitud POST con el cuerpo en el formato correcto. Puedes utilizar herramientas de desarrollo del navegador para inspeccionar la solicitud y asegurarte de que el cuerpo de la solicitud se esté enviando correctamente.

    • Revisar los registros y errores del servidor:
    - Verifica los registros y errores de tu servidor ASP .Net Core para ver si hay información adicional sobre la causa del error de solicitud de mala solicitud 400. Puede ser útil habilitar niveles de registro más detallados para obtener más información sobre lo que está sucediendo en el servidor.

    Espero que alguna de estas sugerencias te ayude a resolver el problema de solicitud de mala solicitud 400 en tu API ASP .Net Core. ¡Déjame saber si necesitas más ayuda o si logras solucionar el problema!

    Respondida el Dec 19, 2020 a las 15:25 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema de CORS:

    Parece que tienes un problema de CORS (Cross-Origin Resource Sharing) que impide que Angular frontend realice solicitudes POST al servidor ASP.NET Core.

    Solución:

    Para resolver este problema, debes agregar los siguientes encabezados de CORS en tu respuesta del servidor:

    csharp
    app.UseCors(builder => {
       builder.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();
    });
    

    Asegúrate de que este middleware se invoque antes de app.UseRouting().

    Problema de serialización del cuerpo de la solicitud:

    El cuerpo de tu solicitud POST contiene un campo con un subrayado ("cashback_rate"). ASP.NET Core normalmente convierte automáticamente los nombres de propiedad en cadenas de kebab (por ejemplo, "cashbackRate") para JSON.

    Solución:

    Para admitir nombres de propiedad con subrayados, puedes usar la anotación [JsonProperty("cashback_rate")] en tu modelo OrderRequest. Esto indicará a ASP.NET Core que use el nombre de propiedad original en lugar de la cadena de kebab.

    Otros puntos a considerar:

    Asegúrate de que tus controladores estén correctamente mapeados en Startup.Configure(). Verifica que tu servidor esté escuchando en el puerto correcto y accesible desde el frontend. Intenta usar una herramienta como Fiddler o Chrome DevTools para depurar las solicitudes y respuestas.

    Código modificado:

    Startup.cs:

    csharp
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        // ... (código existente)
    
        app.UseCors(builder => {
            builder.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();
        });
    
        app.UseRouting();
    
        // ... (código restante)
    }
    

    OrderRequest.cs:

    csharp
    public class OrderRequest
    {
        // ... (código existente)
    
        [JsonProperty("cashback_rate")]
        public string CashbackRate;
    }
    

    Nota:* He eliminado los registros que no se están imprimiendo, ya que no son relevantes para este problema.

    Respondida el Dec 19, 2020 a las 15:30 - por Gemini

    Votos positivos: 0 | Votos negativos: 0