Lambda: Amazon s3 direct upload error signature does not match

Question

I want to upload image files to AWS s3 bucket by using pre-signed URLs, But I'm getting an error shown in the screen shot, I've followed the post from this page s3 direct file upload, I would like to know what mistake I'm making and also I want to know whether this is server side issue or there should I use some different approach for making put request to 'pre-signed' URL, thanks ahead.

My serverless.yml

service: my-service-api

provider:
  name: aws
  runtime: nodejs4.3
  stage:  dev
  region: us-east-1
  iamRoleStatements:
    - Effect: "Allow"
      Action:
        - "dynamodb:*"        
      Resource: "*"
    - Effect: "Allow"
      Action:
        - "s3:*"        
      Resource: "arn:aws:s3:::profile-images/*"   

custom:
  globalResultTtlInSeconds: 1

package:
  individually: true
  include:
    - node_modules/mysql/**
    - node_modules/bluebird/**
    - node_modules/joi/**
  exclude:
    - .git/**
    - .bin/**
    - tmp/**
    - api/**
    - node_modules/**
    - utils/**
    - package.json
    - npm_link.sh
    - templates.yml

functions:
  profiles:
    handler: api/profiles/handler.profiles
    events:
      - http:
          method: POST
          path: api/profiles/uploadURL
          cors: true
          integration: lambda
          request: ${file(./templates.yml):request}  
          authorizer: 
            arn: arn:aws:lambda:us-east-1:000000000000:function:customAuthorizer
            resultTtlInSeconds: ${self:custom.globalResultTtlInSeconds}
            identitySource: method.request.header.Authorization
    package:
      include:
        - api/profiles/**
        - node_modules/node-uuid/**
        - node_modules/jsonwebtoken/**
        - node_modules/rand-token/**          

resources:
  Resources:
    UploadBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: profile-images
        AccessControl: PublicRead
        CorsConfiguration:
          CorsRules:
          - AllowedMethods:
            - GET
            - PUT
            - POST
            - HEAD
            AllowedOrigins:
            - "*"
            AllowedHeaders:
            - "*"   
    IamPolicyInvokeLambdaFunction:
      Type: AWS::IAM::Policy     
      Properties: 
        PolicyName: "lambda-invoke-function"
        Roles:
          - {"Ref" : "IamRoleLambdaExecution"}
        PolicyDocument:
          Version: '2012-10-17'
          Statement:            
              - Effect: Allow
                Action: 
                  - "lambda:InvokeFunction"
                Resource: "*"

My handler file

var s3Params = {
                Bucket: 'profile-images',
                Key: image.name,
                ACL: 'public-read'
            };

 s3.getSignedUrl('putObject', s3Params, function (err, url){
       if(err){
          console.log('presignedURL err:',err);
          context.succeed({error: err});
       }
       else{
          console.log('presignedURL: ',url);
          context.succeed({uploadURL: url});                                           
       }                    
  });

Answer 1

After spending more time on this issue, I realized that this was not problem on server side but the problem was in making request. I needed to set headers for my PUT request because when AWS s3 receives any request it checks the signature of that request versus the headers so if you are setting 'ContentType' or 'ACL' while creating preSignedURL then you have to provide the 'Content-Type' and 'x-amz-acl' in your request.

This is my updated 's3Params'

var s3Params = {
                Bucket: 'profile-images',
                Key: image.name,
                ACL: 'public-read',
                ContentType: image.type
            };

And this is my request

Lastly I got some help from this post set headers for presigned PUT s3 requests