使用fetch()发送带有正文表单数据的Post Request

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吗在fetch方法中，例如Postman？

Answer 1

上述错误通常是由于内容类型在fetch方法提供的内容与服务器API预期的内容之间不匹配而导致的。

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

如果服务器抛出此格式的错误，则可以得出结论，服务器可能期望使用不同格式的内容。

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

• application/json(在当前场景中不起作用(
• 应用程序/x-www-form-urlencoded
• 多部分/表单数据
• text/plain

因此，可以通过将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

Answer 2

您需要添加内容类型

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