javascript - Vue JS-axios を使用して POST API でヘッダー + ボディを渡す方法

Question

aws Cognito ( Token endpoint ) の post API を呼び出そうとしています。それは私の郵便配達クライアントで完全に機能しています。しかし、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」オプションを使用したことです。ここでは、この値を本体に設定できません。

本文のヘッダーと「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,"headers":{"Accept":"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\",\"コード\":\"e19170dc-3d8f-420e-99b6-c05f7abad313\"}"},"リクエスト":{}}