无法使用 axios 接收 monzo 访问令牌

Question

我一整天都在尝试在 React 中使用 axios 执行 post 请求（我正在尝试为 Monzo 应用程序获取 access_token ）。我已按照说明 here 进行操作，并且在使用 httpie 命令行工具进行试用时，它们工作得很好，如所述说明中所示。但是，当我尝试在我的 React 应用程序中使用它时，出现了问题。使用httpie的post问题请求如下：

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"

这按预期工作并且 returns 一个 JSON object 包含我的 access_token.

我在我的 React 应用程序中使用的（有问题的）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 ()。

我发现非常相关的问题，这表明我添加了一个 header 指定 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

由于这些事情通常会发生，所以我在发布问题后不久就找到了答案。显然，'Content-Type' 需要作为 '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'
  }
})

无法使用 axios 接收 monzo 访问令牌

can't receive monzo access token using axios

httpie

reactjs

axios