CORS header ‘Access-Control-Allow-Origin’ missing with PUT request to PreSigned URL

I am using NodeJS to generate my PreSigned URL and passing it to my frontend Angular App, which is making a PUT request to it. There starts the problem it is throwing a CORS error as shown below from my browsers ( Chrome and Firefox)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [https://dflowbucket.sfo3.digitaloceanspaces.com/images-1690112583187-pdf-test.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=DO00B48K2AUXRE8KXVWN%2F20230723%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230723T114303Z&X-Amz-Expires=900&X-Amz-Signature=66076aaa6dfe6b11eb9d29a37e124a97b0d0aa36baab97207d0edb697218ec58&X-Amz-SignedHeaders=host&x-amz-acl=public-read&x-id=PutObject](https://dflowbucket.sfo3.digitaloceanspaces.com/images-1690112583187-pdf-test.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=DO00B48K2AUXRE8KXVWN%2F20230723%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20230723T114303Z&X-Amz-Expires=900&X-Amz-Signature=66076aaa6dfe6b11eb9d29a37e124a97b0d0aa36baab97207d0edb697218ec58&X-Amz-SignedHeaders=host&x-amz-acl=public-read&x-id=PutObject 
(*Reason: CORS header ‘Access-Control-Allow-Origin’ missing*). Status code: 400.

When I try PUT from postman file is turning into private even though my ACL is ‘public-read’

NodeJS Code

_exports_.getPreSignedUrl = async (_fileName_, _contentType_) _=>_ {

    _const_ params = {
      Bucket: digitalocean.BUCKET_NAME,
      Key: fileName,
      ContentType: contentType,
      ACL: 'public-read'
    };

    return await getSignedUrl(s3Client, new PutObjectCommand(params), { expiresIn: 15 * 60 });
}

router.post("/getPreSignedUrl", async (_req_, _res_) _=>_ {
    _const_ {fileName, contentType} = req.body
    _const_ signedUrl = await digitalocean.getPreSignedUrl(fileName,contentType)
    res.status(200).send({ signedUrl });
});

Angular Code

  onSave() {
    if (this.isLoading) { return }
    if (!this.files.length) {
      this._snackBar.open("You need to choose file first!", 'Close', {
        duration: 2000,
      });
      return;
    }
    _const_ file = this.files[0];
    _const_ contentType = file.type;
    _const_ fileName = 'images-' + `${new Date().getTime()}-${file.name.toLowerCase()}`
    this.isLoading = true;
    this.itemService
      .getPreSignedUrl({ fileName, contentType : '*' })
      .subscribe((_res_: { signedUrl: _string_ }) _=>_ {
        _const_ signedUrl = res.signedUrl
        *this.http.put(signedUrl, file)* // my PUT request
          .subscribe((_output_) _=>_ {
            this.itemService
              .saveTechLink({ fileName }, this.data.itemId)
              .pipe(take(1))
              .subscribe((_res_: { sharedLink: _string_ }) _=>_ {
                this.isLoading = false;
                this.dialogRef.close(res.sharedLink)
              })
          },
            (_error_) _=>_ {
              console.error('Error uploading file:', error);
            }
          );
      })
  }

I have tried many solutions suggested in the internetu, but nothing seems to be working

1. I have added cors.xml file <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

2. Advanced CORS Options Origin : * Allowed Methods : GET, PUT Allowed Headers : * Access Control Max Age: 300