How to make a Get request to API Gateway using Angular?

Question

I'm trying to hit this AWS endpoint:

https://abcde12345hf.execute-api.us-east-2.amazonaws.com/dev/users

which returns:

[{
  "id": 1,
  "name": "Mike"
},{
  "id": 2,
  "name": "Brian"
}]

• In my Angular code I'm using AWS4 library to send secretAccessKey, accessKeyId and sessionToken to authenticate the user, but I get the following error:

core.js:12501 ERROR Error: Uncaught (in promise): Error: Request failed with status code 403 Error: Request failed with status code 403

• Does anyone know how to use AWS4 properly with Angular so I can make this simple GET call? or does anyone know another way to make this call using those keys and token for authentication? Thanks a lot in advance!

This is how I get the keys and token (This part works great)

AWS.config.region = 'us-east-2';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: 'us-east-2:ehkjthf-sf23-12ds-xxxxxxxxx',
    Logins: {
        'cognito-idp.us-east-2.amazonaws.com/us-east-2_Raxxxx': this.id_token
    }
});

console.log(AWS.config.credentials);

Now, this is how I'm using those keys and token to make the GET call.

(AWS.config.credentials as AWS.Credentials).get(function(error: AWSError){
  if(error){
    console.log('Error ', error);
  }else{
  let request = {
    host: 'https://abcde12345hf.execute-api.us-east-2.amazonaws.com/dev/users',
    method: 'GET',
    url:  'https://abcde12345hf.execute-api.us-east-2.amazonaws.com/dev/users',
    path: '/users',
    headers: {
      "Content-Type":"application/json"
    },
  }

  let signedRequest = aws4.sign(request,
    {
      secretAccessKey: AWS.config.credentials.secretAccessKey,
      accessKeyId: AWS.config.credentials.accessKeyId,
      sessionToken: AWS.config.credentials.sessionToken
    });

    delete signedRequest.headers['Host']
    delete signedRequest.headers['Content-Length']

    axios(signedRequest).then((response) =>{
      console.log(response); // Output the Array Object here
    });
  }
});

Answer 1

I got it working and I'll share my solution in case anyone else out there needs it!

I ended up using http service from angular and not axios. Here's my solution;

(AWS.config.credentials as AWS.Credentials).get((error: AWSError) =>{
 if(error){
   console.log('Error ', error);
 }else{
 let request = {
   host: 'abcdefg.execute-api.us-east-2.amazonaws.com',
   method: 'GET',
   url:  `https://abcdefg.execute-api.us-east-2.amazonaws.com/dev/users`,
   path: '/dev/users'
 }

  let signedRequest = aws4.sign(request, {
    secretAccessKey: AWS.config.credentials.secretAccessKey,
    accessKeyId: AWS.config.credentials.accessKeyId,
    sessionToken: AWS.config.credentials.sessionToken
  });
  delete signedRequest.headers['Host'];
  this.http.get(signedRequest.url, signedRequest).subscribe(res => this.myObject = res);
 }
}