I'm currently attempting to call the post API of AWS Cognito's Token endpoint. The API functions perfectly when tested in my Postman client, but I am encountering issues when implementing it in my VueJS code.
Here is a snippet of my code:
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>
I am able to successfully retrieve the "code" value from the Login Endpoint provided by AWS documentation. In the above code snippet, the HTTP object is imported from another JS file as shown below:
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'
}
})
I suspect that the issue may lie in the fact that in Postman, I used the 'application/x-www-form-urlencoded' option in both the body and header settings, whereas I am struggling to set this value properly in the body of my current code.
Despite trying out {emulateJSON:true} option, the issue persists!
The error message received states: HTTP Code: 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":"","url":"","data":"{\"grant_type\":\"authorization_code\",\"client_id\":\"4jcmshlse80ab667okni41fbf5\",\"redirect_uri\":\"http://localhost:8080/callback\",\"code\":\"e19170dc-3d8f-420e-99b6-c05f7abad313\"}"},"request":{}}