I'm working in an Vue application and using Axios for api usage. I'm trying to consume an oauth api from AWS to get a token and use it in other api. However, I only receive 400 in the console. The api works fine in Postman, so I don't really know what the problem might be. I've looked some other questions here, but nothing has worked. Here's my code.
auth_api() {
axios
.post(
'https://myawssite.amazoncognito.com/oauth2/token',
{'grant_type':'client_credentials'},
{headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic 123qwe=='
}}
)
.then(response => (this.token = response))
}
In the end, I finally made it using XMLHttpRequest to get the token. After doing a lot of research and testing, I couldn't made it using Axios, Fetch, the AWS-SDK, or AWS-Amplify. While I was looking over the Internet, I stopped on a webpage called https://reqbin.com/. There were some examples of post request using the XMLHttpRequest so I just tried it, and then all worked.
let globalToken; // I declared this outside the export default.
// This is in my created() function.
const loginUrl = 'https://myawssite.amazoncognito.com/oauth2/token'
let xhr = new XMLHttpRequest();
xhr.open('POST', loginUrl);
xhr.setRequestHeader('Authorization', 'Basic 123qwe==');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
console.log(xhr.status);
globalToken = JSON.parse(xhr.responseText);
console.log(globalToken);
console.log(globalToken.access_token);
}
}
xhr.send('grant_type=client_credentials')
Just to complement to the main answer, for the API that I needed to consume, I used the Superagent library (Here again Axios and the others failed me, or maybe I'm just an idiot xD). In this case, XMLHttpRequest didn't work.
import superagent from 'superagent'
// This function is in my methods component.
let login = globalToken;
console.log('token is: ', login.access_token);
const apiUrl = 'https://myawssite.execute-api.us-east-1.amazonaws.com/dev/test';
superagent
.post(apiUrl)
.send({ rut: this.rut})
.set('X-Api-Key', 'QWE123')
.set('Authorization', 'Bearer ' + login.access_token)
.end((err, res) => {
if (err) {
console.log(err);
} else {
console.log('rut: ', this.rut);
console.log(res.text);
}
});