如何使用 Fetch API post body 数据？

Question

下面是导入成功返回响应的curl命令和在postman中运行。

    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"

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

Answer 1

查看 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);

编辑

如评论中@Kaiido所述。没有必要显式设置 Content-Type header，因为浏览器会自动执行此操作，但我在这里这样做是为了向您展示它不应设置为 application/json，而应设置为 application/x-www-form-urlencoded.

如何使用 Fetch API post body 数据？

How to post body data using Fetch API?

javascript

json

postman

fetch-api

编辑