как передать заголовок + тело в POST api с помощью Vue JS-axios

Я пытаюсь вызвать API публикации aws Cognito (Конечная точка токена < / а>). Он отлично работает в моем почтовом клиенте. Но я столкнулся с проблемой в моем коде VueJS.

Ниже мой фрагмент кода.

test.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>

Я успешно получаю значение «кода» от конечной точки входа В приведенном выше коде HTTP - это объект, импортированный из другого javascript, который находится ниже.

http-common.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'
  }
})

Я не уверен, но проблема в том, что в моем почтальоне я использовал параметр application / x-www-form-urlencoded в заголовке body +. И здесь я не могу установить это значение в теле.

Я считаю, что мой заголовок и параметр application / x-www-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, must-revalidate", "expires": "0"}, "config ": {" transformRequest ": {}," transformResponse ": {}," timeout ": 0," xsrfCookieName ":" XSRF-TOKEN "," xsrfHeaderName ":" X-XSRF-TOKEN "," maxContentLength ": - 1, "заголовки": {"Принять": "application / json", "Content-Type": "application / x-www-form-urlencoded"}, "method": "post", "baseURL": "https://maddox.auth.eu-west-1.amazoncognito.com "," url ":" https://maddox.auth.eu-west-1.amazoncognito.com/oauth2/token "," data ":" {\ "grant_type \": \ "authorization_code \", \ "client_id \": \ "4jcmshlse80ab667okni41fbf5 \", \ " redirect_uri \ ": \" http://localhost:8080/callback \ ", \" code \ ": \" e19170dc-3d8f-420e-99b6-c05f7abad313 \ "}"}, "request": {}}


javascript vue.js axios quasar-framework aws-cognito
person Jayesh Dhandha    schedule 25.02.2018    source источник
comment
Вам необходимо структурировать полезную нагрузку с помощью простого JSON.stringify или библиотеки, например qs.   -  person connexo    schedule 25.02.2018
comment
Пытался! Но все та же проблема.   -  person Jayesh Dhandha    schedule 25.02.2018

Ответы (1)


arrow_upward
4
arrow_downward

TOKEN Endpoint принимает только application/x-www-form-urlencoded, и вы отправляете JSON (поскольку axios сериализует только объекты JavaScript в JSON)

Как использовать axios для отправки application/x-www-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>
person Paul Tsai    schedule 25.02.2018