Error "The difference between the request time and the current time is too large" when upload file

[natuan62]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Vue

Amplify APIs

Storage

Amplify Version

v6

Amplify Categories

storage

Backend

None

Environment information

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M1
    Memory: 89.58 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 7.20.0 - ~/.config/yarn/global/node_modules/.bin/npm
    pnpm: 7.9.5 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 130.0.6723.70
    Safari: 18.0.1
  npmPackages:
    amazon-cognito-identity-js: ^6.3.12 => 6.3.12 
    aws-amplify: ^6.6.6 => 6.6.6 
    typescript: 5.1.3 => 5.1.3 
    typings: ^2.1.1 => 2.1.1 
    vite: ^4.5.5 => 4.5.5 
    vite-plugin-node-polyfills: ^0.9.0 => 0.9.0 
    vite-svg-loader: ^4.0.0 => 4.0.0 
    vue: ^3.5.12 => 3.5.12 
    vue-eslint-parser: ^9.4.3 => 9.4.3 
    vue-i18n: ^9.14.1 => 9.14.1 
    vue-router: ^4.4.5 => 4.4.5 
    vue-toastification: 2.0.0-rc.5 => 2.0.0-rc.5 
    vue-tsc: ^1.8.27 => 1.8.27 
    vue-virtual-scroller: 2.0.0-beta.8 => 2.0.0-beta.8 
    vuedraggable: ^4.1.0 => 4.1.0 
  npmGlobalPackages:
    @aws-amplify/cli: 12.12.4
    corepack: 0.28.0
    graphql-schema-utilities: 1.1.8
    npm: 10.7.0
    typescript: 5.6.2

Describe the bug

err RequestTimeTooSkewed: The difference between the request time and the current time is too large.
    at buildStorageServiceError (http://localhost:9092/node_modules/.vite/deps/aws-amplify_storage.js?v=92a7b9ce:960:24)
    at putObjectDeserializer (http://localhost:9092/node_modules/.vite/deps/aws-amplify_storage.js?v=92a7b9ce:1215:11)
    at async http://localhost:9092/node_modules/.vite/deps/aws-amplify_storage.js?v=92a7b9ce:1595:48
    at async http://localhost:9092/node_modules/.vite/deps/aws-amplify_storage.js?v=92a7b9ce:564:22
    at async Object.putS3 (http://localhost:9092/src/modules/t=1729658410804:54:20)
    at async Proxy.uploadFileToStorage (http://localhost:9092/src/modules/t=1729658410804:398:30)

Expected behavior

Can upload file and return response successfully

Reproduction steps

import { uploadData, downloadData, TransferProgressEvent } from 'aws-amplify/storage';

 const operation = uploadData({
      key,
      data: input.file,
      options: {
        contentType: 'text/plain',
        accessLevel,
      },
    });
    const result = await operation.result;

Code Snippet

// Put your code below this line.

[HuiSF]

Hi @natuan62 this error is most likely caused by your local system time is out of sync. Please double check your local system date/time is correct and try again.

[natuan62]

Thanks for your reply.
Hi @HuiSF But Any way to set correctClockSkew like aws-sdk with amplify v6. ?

Many enduser has problem with time, we can't email to each end-user and instruction them set time, time-zone ... on mac-os or windows, ... mobile, etc.

I see same problem
https://stackoverflow.com/questions/77937344/aws-amplify-v6-clock-sync-issue-after-upgrading-packages-and-manual-clock-change

But

The basic problem is that in core/src/clients/middleware/retry/defaultRetryDecider.ts#L19

const errorCode = parsedError?.code;

amply-js has MR fixed this

[HuiSF]

Thanks for the additional info @natuan62 I'll dig into it.

[HuiSF]

Hi @natuan62 I can confirm that Amplify JS v6 has built-in mechanism to auto-correct the clock skew via retying on the RequestTimeTooSkewed error. This mechanism relying on reading the response.headers.Date value.

With S3, the response.headers.Date value is invisible to Amplify JS due to the default CORS policy, you need to update your S3 bucket CORS policy to enable it, and further to ensure the clock skew auto-correcting work as expected.

You can do so by:

1. Navigate to your S3 bucket in the AWS console
2. Go to the permission tab, and scroll down to the section "Cross-origin resource sharing (CORS)"
3. Add Date to ExposeHeaders it looks like the following:

[
    {
        "ID": "S3CORSRuleId1",
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "ETag",
            "Date"
        ],
        "MaxAgeSeconds": 3000
    }
]

Could you give it try? I think we need to update the documentation to call this out.

[natuan62]

@HuiSF Thank you. I can confirm it works fine after Add Date to ExposeHeaders