无法使用axios接收monzo访问令牌 [英] can't receive monzo access token using axios

问题描述

我整天都在尝试使用axios在react中执行发布请求(我正在尝试为Monzo应用获取access_token).我已经按照此处的说明进行操作，并且在尝试使用它们时效果很好使用httpie命令行工具，如上述说明中所示.但是，当我尝试从我的React应用程序中使用它时，事情就出错了.有关使用httpie的发帖请求如下:

I've been trying for the whole day to perform a post request using axios in react (I'm trying to get an access_token for a Monzo app). I've followed the instructions here and they work perfectly when trying them out with the httpie command line tool as illustrated on said instructions. However, when I try to use it from within my react app, things go awry. The post request in question using httpie is as follows:

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对象.

and this works as expected and returns a JSON object containing my access_token.

我在react应用中一直使用的(有问题的)axios命令是:

The (problematic) axios command I've been using in my react app is:

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 ().

The error message I'm getting is Failed to load resource: the server responded with a status of 400 ().

我发现这个非常相关的问题，建议我添加标有Content-Type: application/json的标头，因此我将axios命令更改为:

I found this very related question, which suggests I add a header specifying Content-Type: application/json so I changed my axios commands to:

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

不幸的是，它给出了完全相同的错误.

which, unfortunately, gives the exact same error.

有人可以给我一些指导吗?我对网络很陌生...谢谢！

Can anybody give me a few pointers on this? I'm very new to networking...thanks!

推荐答案

这些事情通常会发生，我在发布问题后不久就找到了答案.显然，"Content-Type"需要以"application/xxx-form-urlencoded"形式发送，并相应地转换数据，如下所示:

And as it usually happens with these things, I found the answer shortly after posting the question. Apparently, the 'Content-Type' needs to be sent as 'application/xxx-form-urlencoded' and the data to be transformed accordingly like so:

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

这篇关于无法使用axios接收monzo访问令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！