Ndtyjky

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.