aws / aws-sdk-js

AWS SDK for JavaScript in the browser and Node.js
https://aws.amazon.com/developer/language/javascript/
Apache License 2.0
7.59k stars 1.55k forks source link

@aws-sdk/lib-storage CORS-less Cross-Origin Requests #4533

Closed cesco69 closed 10 months ago

cesco69 commented 10 months ago

Describe the feature

I'm loading a file from my website frontend example.com to my S3 bucket example.s3.eu-west-1.amazonaws.com, with this code:

    const { S3Client } = require('@aws-sdk/client-s3');
    const { Upload } = require("@aws-sdk/lib-storage");

    const s3Client = new S3Client({
        region: region,
        credentials: {
            accessKeyId: access_key,
            secretAccessKey: secret_key,
            sessionToken: security_token,
        }
    });
    const uploadParams = {
        Bucket: bucket_name,
        Key: key,
        Body: file
    };
    const uploader = new Upload({
        client: s3Client,
        params: uploadParams,
        queueSize: 4, // optional concurrency configuration
        partSize: 1024 * 1024 * 5, // optional size of each part, in bytes, at least 5MB
        leavePartsOnError: false, // optional manually handle dropped parts
    });

    uploader.done().then(console.log).catch(console.error)

Into the chrome's developer tool networks, i see a PUT request for each chunk of the file uploaded to S3, but also a OPTIONS request for each PUT:

Senza titolo

The broblem is the CORS.

Use caching? image don'works! because each PUT has a totally different URL

the only possible solution is send the request to the same domain on a specific path and reverse proxy to the bucket S3.

eg.:

On cloudfront set a reverse proxy example.com/my-bucket to my S3 bucket example.s3.eu-west-1.amazonaws.com and the cose become like this (see ReverseOn):

    const { S3Client } = require('@aws-sdk/client-s3');
    const { Upload } = require("@aws-sdk/lib-storage");

    const s3Client = new S3Client({
        region: region,
        credentials: {
            accessKeyId: access_key,
            secretAccessKey: secret_key,
            sessionToken: security_token,
        }
    });
    const uploadParams = {
        Bucket: bucket_name,
        Key: key,
        Body: file,
        ReverseOn: "https://example.com/my-bucket" // <--------------------
    };
    const uploader = new Upload({
        client: s3Client,
        params: uploadParams,
        queueSize: 4, // optional concurrency configuration
        partSize: 1024 * 1024 * 5, // optional size of each part, in bytes, at least 5MB
        leavePartsOnError: false, // optional manually handle dropped parts
    });

    uploader.done().then(console.log).catch(console.error)

Anyway for make this possible?

Use Case

This cors issue cause a performance degratation on large file

Proposed Solution

No response

Other Information

No response

Acknowledgements

SDK version used

3

Environment details (OS name and version, etc.)

Windows latest Chrome