使用 fetch() 发送带有正文表单数据的发布请求答案

【问题标题】：Sent Post Request with Body Form Data with fetch()使用 fetch() 发送带有正文表单数据的发布请求
【发布时间】：2020-03-24 01:10:04
【问题描述】：

我正在尝试针对 API 发布，当我使用 Postman 和将我的所有数据附加为“表单数据”。

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

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 一样吗？

【问题讨论】：

使用postman to convert the request to actual code。然后，与你的比较！

标签： javascript fetch form-data

【解决方案1】：

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

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

如果服务器针对这种格式抛出错误，则可以断定服务器可能期待不同格式的内容。

支持的有效内容类型格式为：

application/json （在当前场景中不工作）
application/x-www-form-urlencoded
多部分/表单数据
文本/纯文本

因此，可以通过将 fetch 调用中的 'content-type' 标头从 'application/json' 更改为这些其他受支持的类型之一来解决该问题.

一个有效的 fetch 调用示例：

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
})

【讨论】：

感谢您的详细回复！ "application/x-www-form-urlencoded" 成功了

【解决方案2】：

你需要添加内容类型

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

【讨论】：