我从我的提取请求中收到 400 错误请求错误：“需要非空请求正文”，尽管我的提取请求有一个正文答案

【问题标题】：I'm receiving a 400 bad request error: "A non-empty request body is required" from my fetch request, despite my fetch request having a body我从我的提取请求中收到 400 错误请求错误：“需要非空请求正文”，尽管我的提取请求有一个正文
【发布时间】：2021-11-15 01:09:42
【问题描述】：

每次我使用以下 js 代码从前端发出 fetch 请求时，我都会收到 400 Bad request 状态。响应的主体有一个错误对象说：“需要一个非空的请求主体”。

当我检查我的 devtools 网络选项卡上的请求部分时，它显示“此请求没有有效负载”。所以在我看来，它没有发送我的 Fetch 的正文部分。

之后确实会到达.then() 方法。

这是打字稿代码：

fetch(`api/person/${person.id}`, {
  method: "PUT",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(person)
})
  .then(() => this.router.navigate(["/"]))

这是 C# 后端：

[HttpPut("{id}")]
public IActionResult Put(int id, Person person)
{
    person.Id = id;

    try
    {
       var updatedPerson = _personRepository.Update(person);
       if (updatedPerson != null)
       {
            return Ok(updatedPerson);
       }

       return NotFound();
    }
    catch (ArgumentNullException)
    {
        return BadRequest();
    }
}

请注意，请求甚至没有到达此控制器。如果我在这里放置任何断点，将不会达到任何断点。

这是我从 Visual Studio 2019 运行的单页应用程序。

然而，它与邮递员一起工作，返回 200 Ok 状态代码和一个对象，并到达后端断点。请求 URL 包含 int id 和包含 Json 对象的正文。

【问题讨论】：

无法到达控制器的原因可能是有中间件来验证请求体。您的浏览器是否将另一个请求（如 Options 或 Fetch）与您的请求一起发送到同一个 url？闻起来好像标题有问题，以允许正文。请参阅 CORS 政策
@AbrorAbdullaev 根据“网络”选项卡，它只发送 PUT。我认为没有其他任何东西被发送。请您详细说明我可以使用 CORS 政策做什么？谢谢。
你检查过 javascript person 不为空吗？你检查浏览器的开发者工具是否有 javascript 错误？
@Serge 是的，我已经检查过了，并且 person 对象确实存在。我有更多关于另一个答案下的回复中发生的事情的详细信息。我现在发现使用 Angular 的 httpClient 执行请求不会出错，但是 fetch 函数会出错。
@alalalal 你检查浏览器开发者工具的控制台了吗？它通常显示 javascript 错误

标签： javascript angularjs typescript asp.net-web-api

【解决方案1】：

好吧，这不是一个有明确答案的问题。以下是您可能需要采取的步骤：

确保在您的 fetch 请求中参数 person 确实存在，只需在 fetch 之前执行 console.log(person)
确保服务器接受 'application/json' 类型的内容。虽然在这种情况下响应代码应该不同。

查看响应头，后端和前端的出处是否相同？你需要看到的是：

Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Origin: *

Postman 在您的 PC 上作为本机应用程序工作，发送请求的方式与您的浏览器不同，有时这会导致结果不明确。

【讨论】：

我已经检查了参数并且 person 对象确实存在。您的第三点最重要，我的响应标题中没有这 3 行。前端和后端都在localhost:5001 上运行。我不太确定如何检查服务器是否接受 'application/json' 类型的内容，但我认为它是根据响应代码接受的。
现在试着看看你的浏览器没有连接body还是在去服务器的路上丢失了？ - 尝试使用 axios 等其他库来发送相同的请求，可能是 fetch 导致问题。
我已经用 Angular 的 HttpClient 试过了，现在请求可以工作了。这很奇怪。该问题与 Fetch 函数有关。
@alalal 我有类似的问题，就我而言，这是因为我没有将授权标头附加到请求中。但如果这是你的情况，你会得到不同的错误。仍然显示您的标头、请求和响应，也许它会说些什么。

【解决方案2】：

这是一种测试正在发生的事情的方法。

访问您的主网站（http://localhost:5001 或其他）浏览器
打开浏览器开发工具（在大多数浏览器中为 F12）
复制/粘贴以下提取（下面的代码）到您的开发控制台 & 按

会发生什么？您是否取回数据（在控制台中打印）？这可能会让您进入您需要采取的下一步。

fetch("api/person/1")
.then(response => response.json())
.then(data => console.log(data));

【讨论】：

这是一个获取请求。这只是导致这些问题的“放置”请求。我刚刚将该代码粘贴到控制台中，它确实有效。