Odtnhj

Currently working on a client Angular 6 front-end application that is consuming an AWS API Gateway endpoint that has IAM authorization enabled to upload a file with associated metadata to ultimately reside in an S3 bucket.

The app javascript is using a FormData object to encapsulate the file object and metadata and executing an HTTP POST request via Angular HttpClient API and aws-sign-web for SigV4 request header signing. I am currently experiencing an issue when making the POST request call to AWS API Gateway that notes the signed request does not match and receiving the following error message from AWS; "The request signature we calculated does not match the signature you provided. Check your AWS Secret Access Key and signing method."

Note: The file upload POST request works fine without IAM authorization enabled.

Here is a snippet of Angular signed request code:

onSubmit() {

 // clear response messages to hide as necessary
 this.response_message = '';
 this._err.message = '';
 const dataUrl: string = this.baseUrl + '/api/UploadDB/Post';

 // disable submit button
 this.disableSubmit = true;
 this.sort_id = this.getSortID();
 const currentFile: string = this.buildFileName();

 // append file and parameters to form
 const uf = this.upload_file.nativeElement;
 if (uf.files && uf.files[0]) 

 const file = uf.files[0];

 // check file extension to verify .htm/.html
 if (this.checkFileType(file.name)) 

 const formData: FormData = new FormData();
 formData.append('file', file, currentFile);
 formData.append('sortid', this.sort_id);

 // set HTTP headers from aws-sign-web utility
 const headers = this.AWSService.CreateAWSSignedPostRequest(dataUrl, 'POST', formData, this._AuthCredentials.AccessKeyId,
 this._AuthCredentials.SecretAccessKey, this._AuthCredentials.SessionToken);

 // set request headers
 const req_options = 
 headers: headers

 ;

 this.http.post(dataUrl, formData, req_options).subscribe(
 response => 
 this.response_message = 'The following file ' + file.name + ' was published successfully.';

 // clear form
 this.uploadForm.reset();
 this.upload_file.nativeElement.value = '';

 // reset the file browser select label
 this.upload_file_label = this.upload_file_default_label_msg;

 ,
 error => 

 this._err = <Error>error.json();

 // re-enable submit after error response
 this.disableSubmit = false;
 
 );

 else 
 // invalid file type return error message
 // tslint:disable-next-line:max-line-length
 this._err.message = 'errmessage;
 this.disableSubmit = false;
 
 else 
 // there was a problem with the selected file prior to upload
 this._err.message = 'errmessage';
 this.disableSubmit = false;


public CreateAWSSignedPostRequest(dataURL: string, method: string, formData: 
 any, accessKeyID: string,
 secretAccessKey: string, sessionToken: string): HttpHeaders 

 // declare variables
 let headers: HttpHeaders = new HttpHeaders();


 // set aws config parameter
 const config: Config = 
 region: environment.region,
 service: 'execute-api',
 accessKeyId: accessKeyID,
 secretAccessKey: secretAccessKey,
 sessionToken: sessionToken
 ;

 // create aws-sign-web object
 const signer = new AwsSigner(config);

 // declare aws-sign-web request object
 const request = 
 method: method,
 url: dataURL,
 body: formData
 ;

 // sign aws request
 const signed = signer.sign(request);

 console.log(signed);

 // loop through signed request objects and map to Headers list object
 for (const attribute in signed) 
 if (signed[attribute]) 
 headers = headers.append(attribute, signed[attribute]);
 
 

 return headers;

Any assistance is appreciated in resolving this signed request mismatch for sending HTTP POST requests to API Gateway with file multipart/form-data.