Fetch API 调用的响应 400答案

【问题标题】：Response 400 for Fetch API callFetch API 调用的响应 400
【发布时间】：2021-02-27 03:58:09
【问题描述】：

我正在尝试使用 JavaScript 的 Fetch API 进行调用以生成 OAuth 令牌，但我不断收到 400 响应代码，我不知道为什么。我将密钥和秘密写入控制台以验证它们的值，并使用 cURL 进行了相同的 API 调用（具有我预期的响应）。我的语法有小问题吗？

    fetch('https://api.petfinder.com/v2/oauth2/token', {
        method: 'POST',
        body: 'grant_type=client_credentials&client_id=' + key + '&client_secret=' + secret
    }).then(r => { response = r.json() });

【问题讨论】：

您的问题提到使用 Javascript 的 Fetch API。你的意思是说node-fetch？因为您不应该在前端发出请求，因为它会暴露客户端密码。
这只是一个个人项目，我将是唯一使用它的人。如果我确实想公开它，我可能会改用 node - 这是一个很好的观点@ArunKumarMohan

标签： javascript syntax oauth-2.0 fetch

【解决方案1】：

如果请求正文是字符串，则Content-Type 标头默认设置为text/plain;charset=UTF-8。由于您要发送 urlencoded 数据，因此您必须将 Content-Type 标头设置为 application/x-www-form-urlencoded。

fetch('https://api.petfinder.com/v2/oauth2/token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'grant_type=client_credentials&client_id=' + key + '&client_secret=' + secret
})

正如我在评论中提到的，您不应该从浏览器发出上述请求，因为它会暴露客户端密码。

【讨论】：

谢谢！您怎么知道需要 Content-Type 标头？我现在收到 200 条回复。
@KevinHorning 刚刚用解释更新了我的答案。

【解决方案2】：

感谢@Arun 添加 Content-Type 的建议，我现在得到了正确的响应。

此外，对于任何其他使用 petfinder API 的 JavaScript 新手来说，这是我用来从响应中提取令牌的链：

    fetch('https://api.petfinder.com/v2/oauth2/token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'grant_type=client_credentials&client_id=' + key + '&client_secret=' + secret
    }).then(response => response.json().then(data => ({
        data: data,
        status: response.status})  
    ).then(function(res) {
        console.log(res.status, res.data.access_token);
    }));

【讨论】：