使用 fetch() 发送 Post 带有正文数据的请求

Question

我正在尝试 Post 对抗 API，当我使用 Postman 和附上我所有的数据 "form-data".

当我尝试使用这样的 js 获取方法时

const data = {
  'client_id': 'lorem ipsum',
  'client_secret': 'lorem ipsum',
  'scope': 'lorem ipsum',
  'grant_type': 'lorem ipsum'
};


fetch(apiUrl, {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
})

或者像这样：

const data = new FormData();
data.append('client_id', 'lorem ipsum');
data.append('client_secret', 'lorem ipsum');
data.append('scope', 'lorem ipsum');
data.append('grant_type', 'lorem ipsum');

fetch(apiUrl, {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: data
})

我得到一个 invalid_request 错误返回，所以显然 API 期望数据有所不同，任何人都可以帮助我如何将数据作为 formData 传输在 fetch 方法中，例如 Postman 是吗？

Answer 1

您需要添加内容类型

'Content-Type': 'application/x-www-form-urlencoded'

Answer 2

上述错误通常是由于 content-type 与 提供的内容不匹配造成的fetch 方法和服务器期望的方法 API.

在上面的代码中，fetch方法发送的是'aplpication/json'类型的内容。

如果服务器针对此格式抛出错误，则可以断定服务器可能需要不同格式的内容。

支持的有效 content-type 格式是：

application/json （在当前情况下不工作）
application/x-www-form-urlencoded
multipart/form-data
text/plain

因此，通过更改 fetch 调用中的 'content-type' header 可能会解决问题 'application/json' 到这些其他受支持的类型之一。

工作提取调用的示例：

const data = new FormData();
data.append('client_id', 'lorem ipsum');
data.append('client_secret', 'lorem ipsum');
data.append('scope', 'lorem ipsum');
data.append('grant_type', 'lorem ipsum');

fetch(apiUrl, {
  method: "POST",

  headers: {
   // "Content-Type": "application/json"    --> option 1 (not working)
   // "Content-Type": "application/x-www-form-urlencoded"   --> option 2
   // "Content-Type": "multipart/form-data"    --> option 3
   // "Content-Type": "text/plain"    --> option 4
  },

  body: data

})

// Option 5:  Try fetch without any header 
fetch(apiUrl, {
  method: "POST",
  body: data
})

更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

使用 fetch() 发送 Post 带有正文数据的请求

Sent Post Request with Body Form Data with fetch()

javascript

form-data

fetch