reactjs - axios HTTP DELETE请求返回415错误

Question

我正在按照教程类(class)构建一个使用 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');
  }

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

DELETE https://localhost:5001/api/activities/e2beb0eb-eaaa-49ee-92d8-daf472210456 415 (Unsupported Media Type)

createError.js:16 Uncaught (in promise) Error: Request failed with status code 415 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:61)

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

Postman DELETE response

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

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

这是处理 HTTP 请求的后端代码。它分为两部分——1.) 接收 HTTP 请求的 Controller 和 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");
            }
        }
    }
}

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

Answer 1

Axios 不会在删除调用时发送content-type。看起来 ASP.net Core 需要一个content-type。

作为解决方法，您可以只向 delete 调用添加一个正文，然后 Axios 将添加一个content-type，这应该可以解决问题。

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