使用 fetch() 的 POST 请求返回 204 无内容

Posted 2023-02-27

【中文标题】使用 fetch() 的 POST 请求返回 204 无内容

【英文标题】：POST Request Using fetch() Returns 204 No Content

【发布时间】：2018-07-11 07:25:59

【问题描述】：

我正在向 node.js 服务器发出 POST 请求，但无法使其正常工作。这是我的要求：

const headers = 
  'Accept': 'application/json',
  'Content-Type': 'application/json',
  'Authorization': 'this-can-be-anything',
;

export const postVote = (id, vote) =>
  fetch(`$uri/posts/$id`, 
    method: 'POST',
    headers,
    body: JSON.stringify(options: vote),
  ).then(response => response.json())
    .then(data => data)
    .catch(err => console.log(err));

该函数接受“id”和“vote”这两个字符串。 id 被用作请求中 URI 的一部分，并且投票作为选项提供，因此 API 知道如何处理它。两个参数都被正确传递：

id = '8xf0y6ziyjabvozdd253nd'
vote = 'upVote'

这里是服务器/API 的 GitHub 存储库的链接：

Udacity Readable API

以及触发请求时的网络截图：

更新：添加了显示状态 200 的第二个屏幕截图。虽然它显示了这一点并且似乎已经成功，但它仍然没有发布到服务器并且信息保持不变。

【问题讨论】：

看起来文档将参数指定为option，而您将其发送为options。你能告诉我们回复标签吗？更新答案

【参考方案1】：

您正在查看的是网络选项卡中的OPTIONS 请求。对于跨源请求，如果每个请求前面都有一个 OPTIONS 请求，该请求会告诉调用客户端（例如浏览器）远程服务器是否支持这些 HTTP 方法用于跨源上下文。

检查其他请求。如果OPTIONS请求被服务器正确响应，浏览器必须自动跟进你的POST请求

编辑： 此外，文档将参数名称指定为 option，而在您的屏幕截图中，它显示为 options。

延伸阅读：CORS

【讨论】：

好眼睛注意到这一点。

正如您对 OPTIONS 请求选项卡的敏锐度一样，您对文档也有敏锐的洞察力。有了这个捕获，一切都按预期工作。谢谢！

【参考方案2】：

尝试这样声明标题：

var headers = new Headers(
    'Content-Type': 'application/json',
    'Authorization': 'this-can-be-anything',
)