Блог

При локальной попытке отправить запрос POST с помощью Axios в моем интерфейсном приложении NodeJS на мой локальный сервер .NET Core сервер возвращает 204, а запрос axios возвращает ожидающее обещание. Что мне нужно изменить, чтобы получить статус 201 «Создано» / сохранить запись? Когда я пытаюсь отправить запрос в Postman, он работает отлично, но мое приложение, однако, ведет себя по-другому.

запрос 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);
    });
}
  

Действие контроллера .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);
        }
  

Журналы сервера .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 
  

Возвращаемое значение 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();
            });
        }
    }
  

Я заметил вашу консоль из .СЕТЕВОЙ сервер — это ответ на запрос ПАРАМЕТРОВ, а не на ваш запрос POST. И 204 соответствует этому.

Похоже, вы пытаетесь отправить запрос на localhost: 5001 из пользовательского интерфейса, отображаемого с сервера, работающего в другом источнике (например, localhost: 8080). Это вызовет предполетный запрос (с ПАРАМЕТРАМИ метода HTTP), который определяет, должен ли ваш сервер обслуживать это или нет. По соображениям безопасности ошибки отклонения CORS не будут видны в вашем javascript. Вы можете найти более подробную информацию здесь:https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.

Сказав, что если этот запрос выполняется через браузер, пожалуйста, проверьте журналы консоли браузера — они обычно печатают ошибки CORS.

Если вы хотите преодолеть это, у вас есть несколько вариантов:

1. Посмотрите, можете ли вы разместить пользовательский интерфейс также с того же сервера, что и серверная часть.
2. Включите CORS в серверном контроллере и установите правильные заголовки, по крайней мере, для локальных исполнений ( https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api )
3. Включите прокси-сервер на сервере хостинга пользовательского интерфейса для прокси-запросов (со стороны сервера) к вашему бэкэнду. Таким образом, ваш запрос axios отправляется в тот же источник, что и пользовательский интерфейс.