0

I have loosened up CORS to the max from the Digital Ocean Spaces dashboard as seen in screenshot here - https://i.stack.imgur.com/8YrRI.png

I did this per the comment here - https://www.digitalocean.com/community/questions/can-i-upload-to-spaces-using-a-signed-url?comment=119654

I create a signed URL in backend like this:

import { S3Client as S3ClientConstructor } from '@aws-sdk/client-s3';
import { PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

const Spaces = new S3ClientConstructor({
  endpoint: 'https://sfo2.digitaloceanspaces.com',
  region: 'sfo2',
  forcePathStyle: false,
  credentials: {
    accessKeyId: process.env.DO_ACCESS_KEY_ID,
    secretAccessKey: process.env.DO_SECRET_ACCESS_KEY
  }
});

const uploadUrl = await getSignedUrl(
    Spaces,
    new PutObjectCommand({
      Bucket: 'my bucket',
      ACL: 'public-read',
      // Folder
      Key: 'dev'
    }),
    {
      // 10min
      expiresIn: 600
    }
  );

I then upload from the HTML frontend file picker like this:

<input
          className="hidden"
          onChange={async function upload(e) {
            setLoading(true);

            if (!e.target.files?.length) {
              // User canceled the file browser.
              return;
            }

            try {
              const uploadUrl = await fetchPresignedUrl();

              const file = e.target.files[0];
              const formData = new FormData();
              formData.append('file', file);

              const res = await fetch(uploadUrl, {
                method: 'PUT',
                body: formData,
                headers: {
                  'Content-Type': file.type,
                  'x-amz-acl': 'public-read'
                }
              });

              console.log('res.status:', res.status);
            } finally {
              setLoading(false);
            }
          }}
          id="upload-button"
          type="file"
        />

However this still gives me CORS error like this:

(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403.

The redacted presigned URL was:

https://MY_BUCKET_HERE.sfo2.digitaloceanspaces.com/dev?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=******Faws4_request&X-Amz-Date=20230228T194311Z&X-Amz-Expires=600&X-Amz-Signature=***********&X-Amz-SignedHeaders=host&x-amz-acl=public-read&x-id=PutObject

Anyone have any ideas on how to fix this?

Noitidart
  • 35,443
  • 37
  • 154
  • 323

1 Answers1

2

For me, use the const file instead of using the FormData() has worked. Take a look at my CORS configuration: Advanced CORS Options. Attention on the Allowed Headers. I was having the same problem as yours and set the Content-Type on the panel fixed it.

italo_pinto
  • 21
  • 3