typescript - La solicitud Post de Axios devuelve el estado 204 No Content. ¿Qué necesito cambiar para obtener un 201/persistir los datos?

Cuando intento localmente hacer una solicitud POST con Axios en mi aplicación de front-end de NodeJS a mi servidor local .NET core, el servidor devuelve un 204 y la solicitud de Axios devuelve una promesa pendiente. ¿Qué necesito cambiar para lograr un estado 201 creado/persistir el registro? Cuando intento una solicitud POST en Postman funciona perfectamente, pero mi aplicación, sin embargo, se comporta de manera diferente.

solicitud axios:

export const postStudent = (firstName: string, lastName: string, yearLevel: string) => {
  return axios
    .post(
      `${externalAppURL}/Students/`,
      {
        id: Math.floor(Math.random() * 10000),
        firstName: firstName,
        lastName: lastName,
      }
    )
    .then(function (response: any) {
      console.log(response);
    })
    .catch(function (error: Error) {
      console.log(error);
    });
}

acción del controlador de .NET

        // POST: api/Students
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for
        // more details see https://aka.ms/RazorPagesCRUD.
        [HttpPost]
        public async Task<ActionResult<Student>> PostStudent(Student student)
        {
            _context.Students.Add(student);
            await _context.SaveChangesAsync();

          return CreatedAtAction(nameof(GetStudent), new { id = student.Id }, student);
        }

Registros del servidor .NET

info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
      Request starting HTTP/1.1 OPTIONS https://localhost:5001/api/api/Students/  
info: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[4]
      CORS policy execution successful.
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
      Request finished in 2.6859ms 204 

Valor de retorno de Axios post

Promise {[[PromiseState]]: 'pending', [[PromiseResult]]: undefined}
[[PromiseResult]]:undefined
[[PromiseState]]:'pending'
__proto__:Promise

Startup.cs

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseCors(
              options => options.WithOrigins("http://localhost:3000").AllowAnyMethod()
            );
            app.UseHttpsRedirection();

            app.UseRouting();

            app.UseAuthorization();

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

Respuesta #1

Noto que tu consola del servidor .NET es la respuesta a una solicitud OPTIONS y no a tu solicitud POST. Y el 204 corresponde a eso.

Parece que estás intentando hacer una solicitud a localhost:5001 desde una interfaz de usuario renderizada desde un servidor que se ejecuta en un origen diferente (como localhost:8080). Esto causaría una solicitud previa (con el método HTTP OPTIONS) que determina si tu servidor debería servir esto o no. Por razones de seguridad, los errores de rechazo de CORS no serán visibles para tu JavaScript. Puedes encontrar más información aquí: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.

Habiendo dicho eso, si esta solicitud se realiza a través de un navegador, por favor verifique los registros de la consola del navegador; normalmente muestran errores de CORS.

Si quieres superar esto, tienes un par de opciones:

1. Mira si puedes alojar la interfaz de usuario también desde el mismo servidor que el backend.
2. Habilita CORS en el controlador del backend y establece los encabezados correctos, al menos para ejecuciones locales (https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api)
3. Habilita un proxy en el servidor que aloja la interfaz de usuario para redirigir solicitudes (desde el lado del servidor) a tu backend. De esa manera, tu solicitud de axios se envía al mismo origen que la interfaz de usuario.