Tamer UZUN
Tamer UZUN

Reputation: 19

@aws-sdk/client-s3 --> No 'Access-Control-Allow-Origin' header is present on the requested resource

I'm trying to upload from localhost to digital ocean's space .

For this, I use the npm package. But I am getting the error given below. What code should I add to this package so that I don't get an error.

Access to fetch at 'https://****.fra1.digitaloceanspaces.com/directory/aaa.txt?x-id=PutObject' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

My codes:

const handleFileUpload = async file => {

const bucketParams = { Bucket: "bucketname", Key: "directory/aaa.txt", ACL: "public-read", Body: "xxxxxxxxxxxxxx",

};

const command = new AbortMultipartUploadCommand(bucketParams);

try {
  
  const data = await s3Client
  .send(new PutObjectCommand(bucketParams));
  

} catch (error) {
  // error handling.
  
} finally {
  // finally.
}  

};

/// Connection code

import { S3 } from "@aws-sdk/client-s3";

export const s3Client = new S3({ endpoint: "https://fra1.digitaloceanspaces.com", region: "us-east-1", credentials: { accessKeyId: "xxxxxx", secretAccessKey: "xxxx", } }) ;

Upvotes: 1

Views: 1375

Answers (1)

Pedro Schaper
Pedro Schaper

Reputation: 1

I had the same problem and this answer solves my problems, basically it is the Bucket configuration in AWS. https://stackoverflow.com/a/64586341/25517233

You need to go in the bucket configuration with permission and add this lines:

[
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "GET",
        "HEAD"
    ],
    "AllowedOrigins": [
        "*"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
}

]

Just remeber to add the methos you using. For example, i need add "PUT" in AllowedMethods

Upvotes: 0

Related Questions