对 Fetch API 调用的响应 400

Question

我正在尝试使用 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() });

Answer 1

如果请求body是字符串，则Content-Type header默认设置为text/plain;charset=UTF-8。由于您要发送 urlencoded 数据，因此必须将 Content-Type header 设置为 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
})

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

Answer 2

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

此外，对于任何其他 JavaScript 玩宠物寻找器的新手 API，这是我用来从响应中提取令牌的链：

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

对 Fetch API 调用的响应 400

Response 400 for Fetch API call

javascript

syntax

fetch

oauth-2.0