无法使用 Axios 接收 Monzo 访问令牌

Question

我一直在尝试在 react 中使用 axios 执行后请求(我正在尝试为 Monzo 应用程序获取access_token(。我已经按照这里的说明进行操作，当使用httpie命令行工具试用它们时，它们可以完美运行，如上述说明所示。但是，当我尝试从我的反应应用程序中使用它时，事情就出错了。使用 httpie 的发布请求如下：

http --form POST "https://api.monzo.com/oauth2/token" 
"grant_type=authorization_code" 
"client_id=my_client_id" 
"client_secret=my_client_secret" 
"redirect_uri=my_redirect_uri" 
"code=my_authorization_code"

这按预期工作并返回一个包含我的access_token的 JSON 对象。

我一直在我的反应应用程序中使用的(有问题的(axios 命令是：

axios.post(
"https://api.monzo.com/oauth2/token", {
grant_type: "authorization_code",
client_id: my_client_id,
client_secret: my_client_secret,
redirect_uri: my_redirect_uri,
code: my_authorization_code
})

我收到的错误消息是Failed to load resource: the server responded with a status of 400 ()。

我发现了这个非常相关的问题，它建议我添加一个指定Content-Type: application/json的标题，所以我将我的 axios 命令更改为：

axios({
method: "POST",
url: "https://api.monzo.com/oauth2/token",
data: JSON.stringify({
grant_type: "authorization_code",
client_id: my_client_id,
client_secret: my_client_secret,
redirect_uri: my_redirect_uri,
code: my_authorization_code
}),
headers: {
'Content-Type': 'application/json'
}
})

不幸的是，这给出了完全相同的错误。

谁能给我一些指示？我对网络很陌生...谢谢！

Answer 1

正如这些事情通常发生的那样，我在发布问题后不久就找到了答案。显然，"内容类型"需要作为"application/xxx-form-urlencoded"发送，并且要相应地转换的数据，如下所示：

const queryString = require('query-string')
axios({
method: "POST",
url: "https://api.monzo.com/oauth2/token",
data: queryString.stringify({grant_type: ...}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})