0

我一整天都在尝试使用 axios 在 react 中执行发布请求（我正在尝试为 Monzo 应用程序获取 access_token）。我已按照此处的说明进行操作，并且在使用命令行工具进行尝试时，它们可以正常工作，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"

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

我在我的 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 ().

我发现了这个非常相关的问题，它建议我添加一个标头指定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'
  }
})

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

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

4

1 回答 1

0

正如这些事情通常发生的那样，我在发布问题后不久就找到了答案。显然，“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'
  }
})
于 2019-08-18T21:30:52.813 回答