如何使用Vue JS axios在POST api中传递头体

Question

我正在尝试调用aws Cognito（Tokenendpoint）的post API。它在我的邮递员客户端中完美地工作。但是我在我的VueJS代码中面临这个问题。

下面是我的代码片段。

测验vue

<script>
HTTP.post(`token`, {
    'grant_type': 'authorization_code',
    'client_id': 'XXXXXXXXXXXXXXXXXXXXXXXXX',
    'redirect_uri': 'http://localhost:8080/callback',
    'code': this.$route.query.code
  })
  .then(response => {
    console.log('Response: ' + response)
  })
  .catch(e => {
    console.log('Error: ' + e)
  })
</script>

我成功地从登录endpoint获取“代码”值在上面的代码中，HTTP是从下面的其他javascript导入的对象。

http通用。js

import axios from 'axios'

export const HTTP = axios.create({
  baseURL: 'https://maddox.auth.eu-west-1.amazoncognito.com/oauth2/',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

我不确定，但问题是在我的邮递员中，我在正文标题中使用了“应用程序/x-ows-form-urlencoded”选项。在这里，我无法在正文中设置此值。

我认为我的标题和正文中的“应用程序/x-ows-form-urlencoded”选项没有正确设置。

我试过使用{emulateJSON:true}选项。但没用！

我得到了HTTP代码：400

{"data"：{"error"："invalid_request"}，"status"： 400，"statusText"："Bad Request"，"Headers"：{"pragma"："no-cache"，"content-type"："Application/json； charset=UTF-8"，"cache-control"："no-cache， no-store， max-age=0， slet-revalate"，"expier"："0"}，"config"：{"transformRequest"：{}，"transformResponse"：{}，"timeout"： 0，"xsrfCookieName"："XSRF-TOKEN"，"xsrfHeaderName"："X-XSRF-TOKEN"，"maxContentLlong"：-1，"Headers"：{"Accept"："Application/json"，"Content-Type"："Application/x-ow-form-urlencoded"}，"method"："post"，"baseURL"："https://maddox.auth.eu-west-1.amazoncognito.com"，\"：\"e19170dc-3d8f-420e-99b6-c05f7abad313\"}"},"请求"：{}}

Answer 1

令牌endpoint只接受application/x-www-form-urlencoded，您正在发送JSON（因为axios只将JavaScript对象序列化为JSON）

如何使用axios发送应用程序/x-web-form-urlencoded：https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

下面是qs库的示例

<script>
HTTP.post(`token`, qs.stringify({
    'grant_type': 'authorization_code',
    'client_id': 'XXXXXXXXXXXXXXXXXXXXXXXXX',
    'redirect_uri': 'http://localhost:8080/callback',
    'code': this.$route.query.code
  }))
  .then(response => {
    console.log('Response: ' + response)
  })
  .catch(e => {
    console.log('Error: ' + e)
  })
</script>