使用fetch（）发送带有身体形态数据的过帐请求

Question

我正在尝试针对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传输吗？例如在Postman的fetch方法中呢？

Answer 1

您需要添加内容类型

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

Answer 2

上面的错误通常是由于content-type在fetch方法提供的内容与服务器API期望的内容之间的不匹配引起的。

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

如果服务器为此格式引发错误，则可以得出结论，服务器可能期望使用其他格式的内容。

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

在当前情况下不起作用：

• application / json

其他支持的格式：] >>

• 应用程序/ x-www-form-urlencoded
• multipart / form-data
• 文本/纯文本

因此，可以通过将fetch

调用中的'content-type'标头从'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