axios HTTP DELETE 请求返回 415 错误

Question

我正在按照教程课程构建一个以 ASP.NET Core 作为后端的 React.js 应用程序。我使用 Axios 来处理 HTTP 请求，我测试了 get、post、put 请求工作正常，但在 del 请求期间不断出现错误。这是产生相同错误的简化函数：

  const handleDeleteActivityTest = () => {
    Axios.delete('https://localhost:5001/api/activities/e2beb0eb-eaaa-49ee-92d8-daf472210456');
  }

并且该请求在控制台中打印以下错误消息：

删除https://localhost:5001/api/activities/e2beb0eb-eaaa-49ee-92d8-daf472210456 415（不支持的媒体类型）

createError.js:16 未捕获（承诺中）错误：在 XMLHttpRequest.handleLoad (xhr.js:61) 处的 createError (createError.js:16) 处的解决 (settle.js:17) 处请求失败，状态代码为 415

但我在 Postman 中进行了测试，删除请求工作正常并返回 200 OK 响应，并且我可以在数据库中看到该条目已删除：

邮递员删除回复

如果有人能告诉我这里发生了什么，我将非常感激。谢谢您并保持安全和快乐。

编辑 - - - - - - - - - - - - - - - - -

这是处理 HTTP 请求的后端代码。它分为两部分 - 1.) 接收 HTTP 请求的控制器和 2.) 处理它的 MediatR 类：

1.)

namespace API.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ActivitiesController : ControllerBase
    {
        private readonly IMediator _mediator;

        public ActivitiesController(IMediator mediator)
        {
            _mediator = mediator;
        }

        [HttpDelete("{id}")]
        public async Task<ActionResult<Unit>> Delete(Guid id, Delete.Command command)
        {
            command.Id = id;
            return await _mediator.Send(command);
        }
    }
}

2.)

namespace Application.Activities
{
    public class Delete
    {
        public class Command : IRequest
        {
            public Guid Id { get; set; }
        }

        public class Handler : IRequestHandler<Command>
        {
            private readonly DataContext _context;

            public Handler(DataContext context)
            {
                _context = context;
            }

            public async Task<Unit> Handle(Command request, CancellationToken cancellationToken)
            {
                var activity = await _context.Activities.FindAsync(request.Id);

                if (activity == null)
                    throw new Exception("Could not find activity");

                _context.Remove(activity);



                var success = await _context.SaveChangesAsync() > 0;

                if (success) return Unit.Value;

                throw new Exception("Problem saving changes");
            }
        }
    }
}

我发现控制器中的 HttpDelete 方法接收 id 作为 Guid，但在 React 应用程序中 id 键入为字符串，因此我将控制器和 MediatR 类中的类型更改为字符串，但同样的 http 错误 415。

Answer 1

Axios 不会在删除调用时发送内容类型。看起来 ASP.net core 想要一个content-type。

作为一种解决方法，您可以只向删除调用添加一个正文，然后 Axios 将添加一个内容类型，这应该可以解决问题。

const handleDeleteActivityTest = () => {
    Axios.delete('https://localhost:5001/api/activities/e2beb0eb-eaaa-49ee-92d8-daf472210456', {
      data: {foo: 'bar'}
    });
  }