如何使用 Fetch API 发布身体数据？

下面是在邮递员中导入并运行后成功返回响应的curl命令。

    curl --request POST \
--data "grant_type=password" \
--data "username=test" \
--data "password=xyz1234" \
--data "scope=write" \
--data "client_id=test" \
--data "client_secret=test12" \
"https://example.com/access_token"

下面是我如何在 js 代码中使用 fetch api 发送数据。

       const response = await fetch ('https://example.com/access_token', 

  {
    'credentials' : 'include',
     method: 'POST',
     headers: {
      'Content-Type': 'application/json',
      },
     body: JSON.stringify({ grant_type:'password',username:'test',password:'xyz1234',scope:'write',client_id:'test',client_secret:'test12'}),
})

然而，从 Chrome 开发者工具复制后生成的等效卷曲如下。

curl --request POST \
--data-raw '{"grant_type":"password","username":"test","password":"xyz1234","scope":"write","client_id":"test","client_secret":"test12"}'
"https://example.com/access_token"

我怀疑正文数据的格式不正确。这可能会导致 400 错误代码响应。我应该如何使用 fetch api 等价于工作curl 命令发送数据？

看着curl您的数据似乎确实是 URL 编码的。因此，由于它不需要 JSON，因此不要将其序列化为 JSON 字符串。

const headers = new Headers({
  "Content-Type": "application/x-www-form-urlencoded"
});

const urlencoded = new URLSearchParams({
  "grant_type": "password",
  "username": "test",
  "password": "xyz1234",
  "scope": "write",
  "client_id": "test",
  "client_secret": "test12",
});

const opts = {
  method: 'POST',
  headers: headers,
  body: urlencoded,
};

fetch("https://example.com/access_token", opts);

EDIT

As @Kaiido https://stackoverflow.com/users/3702797/kaiido评论中提到。无需设置Content-Type明确标头，因为浏览器会自动执行此操作，但我在这里这样做是为了向您展示它不应该设置为application/json but to application/x-www-form-urlencoded.