使用 fetch() 發送帶有正文表單數據的 Post 請求

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 期望數據有所不同，有人可以幫助我解決如何在 fetch 方法中將數據作為 formData 傳輸，例如 Postman 嗎？

Answer 1

上述錯誤通常是由於fetch方法提供的內容與服務器 API 預期的內容類型不匹配造成的。

在上面的代碼中，fetch 方法正在發送類型為 'aplpication/json' 的內容。

如果服務器針對此格式拋出錯誤，則可以得出結論，服務器可能需要不同格式的內容。

支持的有效內容類型格式是：

• 應用程序/ json （在當前場景中不起作用）
• 應用程序/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
})

更多信息：

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

Answer 2

您需要添加內容類型

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